Triyng, чтобы добавить текст при нажатии на отправку с помощью React - PullRequest
Новая
       49

Triyng, чтобы добавить текст при нажатии на отправку с помощью React

0 голосов
/ 08 мая 2020

СМОТРЕТЬ ИЗОБРАЖЕНИЕ Может кто-нибудь, пожалуйста, помогите мне выяснить, почему, когда я нажимал «Отправить», у меня отображается только новая вкладка, а не текст. Я прикрепил изображение, чтобы вы могли видеть, что отображается, когда я нажимаю кнопку отправки. 

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>

, чтобы выяснить, почему, когда я нажал «Отправить», у меня отображается только новая вкладка, а не текст

Ответы [ 3 ]

0 голосов
/ 09 мая 2020

вам нужно перевести весь объект в состояние, как показано ниже: 

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>
        )
    }
}
0 голосов
/ 10 мая 2020

Спасибо за помощь, Хабир, теперь работает

0 голосов
/ 09 мая 2020

Как только нажата кнопка «отправить», setState в handlesubmit fun c пытается объединить строку в список массивов 

 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}

Надеюсь, это поможет

...