如何在 React 中添加到状态数组

Question

我正在 React 中制作一个简单的待办事项列表应用程序。我有 3 种状态，inputText（用户输入的任务）、triggerAnimation（触发动画）和 tasks（用户输入的任务列表）。但是我不知道如何更新任务状态（这是一个数组）来推送新任务。这是代码。

 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      inputText: '',
      triggerAnimation: '',
      tasks: []
    }
  }

//The function triggered by button which sends the task the user has entered to the tasks array state:

  addItem() {
    document.querySelector("#textfield1").value = ""
    this.setState({
      triggerAnimation: 'fadein', tasks:
      this.state.inputText
    })
  }

  render() {
    //Where User enters task:
    return (
      <div className="App">
        <main>
          <div className="enterTask">
            <input type="text" className="inputclass" id="textfield1"
              placeholder='Enter a task.'
              onChange={event => this.setState({
                inputText: event.target.value })}
              onKeyPress={event => {
                if(event.key === 'Enter') {
                  this.addItem();
                }
               }}
             />
            <br />
            <br />
            <button className="button"
              onClick={() => this.addItem()} data-
                toggle='fadein' data-target='list'>+
            </button>
         </div>

    <!-- Where tasks will appear: -->

         <div className="log">
           <p className='list'>
             <span class={this.state.triggerAnimation}>
               {this.state.tasks}
             </span>
           </p>
           <button className="button">-</button>
         </div>
       </main>
     </div>
    )
  }
}

export default App;

原文由 Usman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好像你想要的是这个..

 addItem() {
document.querySelector("#textfield1").value = ""
this.setState({
            triggerAnimation: 'fadein',
            tasks: this.state.tasks.concat(this.state.inputText)})
}

原文由 Shanon Jackson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

但是我不知道如何更新任务状态（这是一个数组）来推送新任务。

在状态中“推送到数组”的最干净的方法可能是使用 ES6 array spread 。最佳实践也是使用 setState 回调语法 来确保在推送新任务之前提交正确的状态：

 this.setState(prevState => ({
  tasks: [...prevState.tasks, newTask]
}));

原文由 Aaron Beall 发布，翻译遵循 CC BY-SA 3.0 许可协议