在用React单击Submit时尝试添加一些文本

Question

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时，我只显示一个新选项卡，而不显示文本

Answer 1

单击“提交”后，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}

希望这会有所帮助

Answer 2

您需要将整个对象置于如下所示的状态：

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>
        )
    }
}

Answer 3

感谢您对卡比尔的帮助，现在可以使用