javascript - 尝试使用 React 单击提交时添加一些文本
问题描述
看图片有人可以帮我弄清楚为什么当我点击提交时我只显示一个新标签而不是文本。我附上了一张图片,这样您就可以看到我单击提交按钮时显示的内容。
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>
弄清楚为什么当我点击提交时我只显示了一个新选项卡而不是文本
解决方案
您需要将整个对象置于如下状态:
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>
)
}
}
推荐阅读
- python - Python比较嵌套列表中的元素(如果更大)
- elasticsearch - 如何在 Aiven 的 ElasticSearch 中使用通配符字段?
- modelica - 将 1D 扭矩应用到 3D 旋转接头,而不会产生反作用
- xml - 在应用之前从模板中添加条件
- validation - 无法从 ActiveAdmin 的输入中删除 :hidden_field
- x509 - [AWS][EKS][Fargate] x509:由未知机构签署的证书
- java - 从 ArrayList 中删除空值
- java - 从 impex 获取值到 InitDefaultInterceptor Hybris
- flutter - 如何在颤动中拆分底部导航栏项目的边距?
- php - Woocommerce & Opayo:向发送到 API 的数据添加自定义字段