处理程序方法可以访问另一个处理程序方法属性吗？

Question

我是 react.js 的新手。所以作为我的第一次练习，我正在创建一个待办事项列表。

正如您在以下代码中所见，我为一个简单易用的应用程序定义了两个处理程序。我有一个 div，其中包含一个输入字段和一个添加任务的按钮......所以 addTaskHandler 的工作是收集用户在输入字段中写入的任何内容，然后单击 ADD 按钮，任务将被添加到 TASKS 数组等等...但它不能正常工作。

所以如果我为按钮定义了另一个处理程序（pushTaskHandler），它将只添加任务..和一个处理程序（addTaskHandler）为输入字段收集用户输入并保存它......这样按钮handler 将从输入处理程序访问数据并将其添加到数组对象列表中。

所以问题是如何从另一个处理程序方法访问数据？

我尝试在全局范围内声明一个变量（newTask）并将输入数据保存在其中。后来尝试将数据推送到Tasks ArrayList中。但它不起作用。

import React from 'react';
import Task from './Todo/Todo';
import './App.css';

class App extends React.Component {
  constructor(props){
   super(props);
   this.state = {
    Tasks: [
     {task: "Go to Gym"},
     {task: "Cook Breakfast"},
     {task: "Go to class"},
     {task: "Draw a car and read a book"}
   ]
  }
 }


deleteHandler = (taskIndex)=> {
 const task = [...this.state.Tasks];
 task.splice(taskIndex, 1);
 this.setState({Tasks: task});
}


addTaskHandler = (event) => {
 let newTask = {task: event.target.value};

}

pushTaskHandler = ()=> {
 const task = [...this.state.Tasks];
 task.push(newTask);
 this.setState({Tasks: task});
}



render(){
 let tsk = null;

 tsk = (
  <div>
    {this.state.Tasks.map((t, index)=>{
      return <Task task={t.task}
      deleted={(this.deleteHandler.bind(this, index))}/>
    })}
  </div>
 )
return (
  <div className="App">
    <div className="add">
      <input type="text"onChange={this.addTaskHandler} placeholder="Add a new task"/>
      <button onClick={this.pushTaskHandler}>ADD</button>
    </div>

   {tsk}
  </div>
  );
 }
}

export default App;

我希望用户在输入字段中键入的数据会在单击“添加”按钮后添加到任务组件中。

Answer 1

稍微修改你的代码，它可以改进，但你可以看到它是如何工作的。这里我们在每次输入变化时存储一个任务值，然后你可以在创建新任务时从状态中获取这个值。

class App extends React.Component {
  constructor(props){
   super(props);
   this.state = {
    Tasks: [
     {task: "Go to Gym"},
     {task: "Cook Breakfast"},
     {task: "Go to class"},
     {task: "Draw a car and read a book"}
   ]
  }
 }


deleteHandler = (taskIndex)=> {
 const task = [...this.state.Tasks];
 task.splice(taskIndex, 1);
 this.setState({Tasks: task});
}


addTaskHandler = (event) => {
 const inputValue = event.target.value;
 this.setState(state => ({
    ...state,
    inputValue,
 }));
}

pushTaskHandler = ()=> {
  this.setState(state => ({
    ...state,
    Tasks: [...state.Tasks, { task: state.inputValue}],
    inputValue: ''
  }));
}

render(){
 let tsk = null;

 tsk = (
   <div>
     {this.state.Tasks.map((t, index)=>{
       return <Task task={t.task}
         deleted={(this.deleteHandler.bind(this, index))}/>
     })}
   </div>
 )

return (
  <div className="App">
    <div className="add">
      <input type="text"onChange={this.addTaskHandler} placeholder="Add a new task"/>
      <button onClick={this.pushTaskHandler}>ADD</button>
    </div>

   {tsk}
  </div>
  );
 }
}

ReactDOM.render(<App />, document.querySelector("#app"))