单击 React 提交时尝试添加一些文本
Triyng to add some text when clicking on submit with React
SEE PICTURE谁能帮我弄清楚为什么当我点击“提交”时我只显示了一个新标签而不是文本。我附上了一张照片,这样你就可以看到当我点击提交按钮时显示的内容。
import React, { Component } from 'react'
export default class TodoList extends Component {
constructor(props) {
super(props)
this.state = {
todo:"",
completed: "",
itemList: [
{ todo: "Take out the Trash", completed: true },
{ todo: "Water the plants", completed: false },
{ todo: "Grocery shopping", completed: true }
]
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e) {
this.setState({todo: e.target.value});
}
handleSubmit(n) {
this.setState({
itemList: [...this.state.itemList, this.state.todo],
});
}
render() {
return (
<div className="container">
<div className="main">
<div>
<input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo} onChange={this.handleChange}/><br></br>
<button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
</div>
<div>
{this.state.itemList.map((item, index) => (<p className="mt-4 list" key={index}>{item.todo}{item.completed} <input type="checkbox" /></p>))}
</div>
</div>
</div>
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
弄清楚为什么当我点击提交时我只显示了一个新标签而不是文本
一点击"submit",handlesubmit函数中的setState就尝试合并
一个字符串到数组列表
handleSubmit(n) {
this.setState({
itemList: [...this.state.itemList, //1. this holds an array of objects
this.state.todo], //2. however this is just a string getting pushed into array of objects
});
尝试将第 2 行更改为此
{todo: this.state.todo, completed: false}
希望对您有所帮助
您需要将整个对象置于如下状态:
this.setState({
itemList: [...this.state.itemList, {todo: this.state.todo, completed: true}],
});
完整示例如下:
import React, {Component} from 'react'
export default class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
todo: "",
completed: "",
itemList: [
{todo: "Take out the Trash", completed: true},
{todo: "Water the plants", completed: false},
{todo: "Grocery shopping", completed: true}
]
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({todo: e.target.value});
}
handleSubmit(n) {
this.setState({
itemList: [...this.state.itemList, {todo: this.state.todo, completed: true}],
});
}
render() {
return (
<div className="container">
<div className="main">
<div>
<input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo}
onChange={this.handleChange}/><br></br>
<button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
</div>
<div>
{
console.log(this.state.itemList, 'list')
}
{this.state.itemList.map((item, index) => (
<p className="mt-4 list" key={index}>{item.todo}{item.completed} <input type="checkbox"/>
</p>))}
</div>
</div>
</div>
)
}
}
感谢 Khabir 的帮助,现在可以使用了
SEE PICTURE谁能帮我弄清楚为什么当我点击“提交”时我只显示了一个新标签而不是文本。我附上了一张照片,这样你就可以看到当我点击提交按钮时显示的内容。
import React, { Component } from 'react'
export default class TodoList extends Component {
constructor(props) {
super(props)
this.state = {
todo:"",
completed: "",
itemList: [
{ todo: "Take out the Trash", completed: true },
{ todo: "Water the plants", completed: false },
{ todo: "Grocery shopping", completed: true }
]
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e) {
this.setState({todo: e.target.value});
}
handleSubmit(n) {
this.setState({
itemList: [...this.state.itemList, this.state.todo],
});
}
render() {
return (
<div className="container">
<div className="main">
<div>
<input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo} onChange={this.handleChange}/><br></br>
<button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
</div>
<div>
{this.state.itemList.map((item, index) => (<p className="mt-4 list" key={index}>{item.todo}{item.completed} <input type="checkbox" /></p>))}
</div>
</div>
</div>
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
弄清楚为什么当我点击提交时我只显示了一个新标签而不是文本
一点击"submit",handlesubmit函数中的setState就尝试合并 一个字符串到数组列表
handleSubmit(n) {
this.setState({
itemList: [...this.state.itemList, //1. this holds an array of objects
this.state.todo], //2. however this is just a string getting pushed into array of objects
});
尝试将第 2 行更改为此
{todo: this.state.todo, completed: false}
希望对您有所帮助
您需要将整个对象置于如下状态:
this.setState({
itemList: [...this.state.itemList, {todo: this.state.todo, completed: true}],
});
完整示例如下:
import React, {Component} from 'react'
export default class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
todo: "",
completed: "",
itemList: [
{todo: "Take out the Trash", completed: true},
{todo: "Water the plants", completed: false},
{todo: "Grocery shopping", completed: true}
]
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({todo: e.target.value});
}
handleSubmit(n) {
this.setState({
itemList: [...this.state.itemList, {todo: this.state.todo, completed: true}],
});
}
render() {
return (
<div className="container">
<div className="main">
<div>
<input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo}
onChange={this.handleChange}/><br></br>
<button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
</div>
<div>
{
console.log(this.state.itemList, 'list')
}
{this.state.itemList.map((item, index) => (
<p className="mt-4 list" key={index}>{item.todo}{item.completed} <input type="checkbox"/>
</p>))}
</div>
</div>
</div>
)
}
}
感谢 Khabir 的帮助,现在可以使用了