Question

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

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;

Answer 1

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

可能是推送到阵列的最干净方式＆＃34;状态是使用ES6 array spread。最佳做法还是使用setState callback syntax来确保在推送新任务之前提交了正确的状态：

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

Answer 2

看起来像你想要的是这个..

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

Answer 3

您可以使用.concat方法使用新数据创建数组的副本：

  addTask() {
    this.setState({tasks: this.state.tasks.concat(["new value"])})
  }

您还需要在构造函数中将this绑定到addTask：

this.addTask = this.addTask.bind(this)

参见我的例子：

https://jsfiddle.net/69z2wepo/103069/

文档：https://reactjs.org/docs/react-component.html#setstate

Answer 4

FTFY最好只在代码中使用注释，关于你想要获取任务数组的问题然后可以连接这些东西来获得一个新的数组。

setState({tasks:this.state.tasks.concat([this.state.inputText])})

对于清理代码也不会有什么伤害...学习反应自己的书＆＃34;学习的道路反应＆＃34;有一些关于如何设置更具可读性的好技巧。

编辑实际上现在把正确的代码放在这里......

Answer 5

通过反应，您几乎总是必须将表单字段信息存储在状态（受控组件）中，那么如何将待办任务输入字段转换为受控组件，如下所示：

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: []
        }

        this.onInputChange = this.onInputChange.bind(this);
        this.onInputKeyPress = this.onInputKeyPress.bind(this);
        this.addItem = this.addItem.bind(this);
    }

    onInputChange(e) {
        this.setState({ inputText: e.target.value });
    }

    onInputKeyPress(e) {
        if (e.key === "Enter") {
            this.addItem();
        }
    }

    addItem() {
        const itemToAdd = this.state.inputText;
        const tasks = this.state.tasks;
        this.setState({
            inputText: "",
            tasks: tasks.concat(itemToAdd);
        });
    }

    render() {
        const { inputText } = this.state;
        return(
            <div>
                <input type="text" className="inputclass" id="textfield1" placeholder='Enter a task.' 
                   value={inputText} onChange={this.onInputChange} onKeyPress={this.onInputKeyPress} />
                <br />
                <br />
                <button className="button" onClick={this.addItem} data-
                toggle='fadein' data-target='list'>+</button>
            </div>
        );
    }
}

注意如何通过组件状态控制输入状态

Answer 6

试试这个

import React from 'react';

class Todo extends React.Component {
  constructor(props) {
    super();
    this.state = {
      value: '',
      items: []
    }
  }

  onChange = e => this.setState({ value: e.target.value })

  onEnter = e => {
    if(e.charCode !== 13) return;
    this.addItem();
  };

  onClick = e => {
    this.addItem()
  };

  addItem = () => {
    const { value } = this.state;
    if(!!value.trim()) return;
    this.setState(prev => ({ items: [...prev.items, value], value: '' }))
  };

  render() {
    const { value } = this.state
    return (
      <div>
        <div>
          <input
            type="text"
            value={value}
            name="abc"
            onChange={this.onChange}
            onKeyPress={this.onEnter}
          />
        </div>
        <button onClick={this.onClick}>Add</button>
      </div>
    )
  }
}

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

6 个答案: