Reactjs 处理程序方法能否访问另一个处理程序方法属性？

我是react.js的新手。因此，作为我的第一次练习，我创建了一个待办事项列表

正如您在下面的代码中所看到的，我为一个简单的应用程序定义了两个处理程序。我有一个div，其中包含一个输入字段和一个添加任务的按钮…因此addTaskHandler的工作是收集用户在输入字段中写入的任何内容，单击“添加”按钮后，任务将添加到任务数组中，依此类推…但它工作不正常

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

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

我尝试全局声明一个变量（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;

从“React”导入React；
从“/Todo/Todo”导入任务；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
任务：[
{任务：“去健身房”}，
{任务：“煮早餐”}，
{任务：“去上课”}，
{任务：“画一辆车，读一本书”}
]
}
}
deleteHandler=（任务索引）=>{
const task=[…this.state.Tasks]；
任务拼接（任务索引，1）；
this.setState（{Tasks:task}）；
}
addTaskHandler=（事件）=>{
让newTask={task:event.target.value}；
}
pushTaskHandler=（）=>{
const task=[…this.state.Tasks]；
任务推送（newTask）；
this.setState（{Tasks:task}）；
}
render（）{
设tsk=null；
tsk=(
{this.state.Tasks.map（（t，index）=>{
返回
})}
)
返回(
添加
{tsk}
);
}
}
导出默认应用程序；

---

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

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

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
任务：[
{任务：“去健身房”}，
{任务：“煮早餐”}，
{任务：“去上课”}，
{任务：“画一辆车，读一本书”}
]
}
}
deleteHandler=（任务索引）=>{
const task=[…this.state.Tasks]；
任务拼接（任务索引，1）；
this.setState（{Tasks:task}）；
}
addTaskHandler=（事件）=>{
const inputValue=event.target.value；
this.setState（state=>({
……国家，
输入值，
}));
}
pushTaskHandler=（）=>{
this.setState（state=>({
……国家，
Tasks:[…state.Tasks，{task:state.inputValue}]，
输入值：“”
}));
}
render（）{
设tsk=null；
tsk=(
{this.state.Tasks.map（（t，index）=>{
返回
})}
)
返回(
添加
{tsk}
);
}
}
ReactDOM.render（，document.querySelector（“#app”））

请您解释inputValue是如何作为对象存储在以下代码中的addTaskHandler=（event）=>{const inputValue=event.target.value；this.setState（state=>（{…state，inputValue，}））；}

setState

函数可以使用对象作为新的状态值或更新程序函数调用，它有两个参数：

state

和

props

。因此，在该代码中，我只是复制一个现有状态并添加

inputValue

。它也可以写成

this.setState（{…this.state，inputValue}）

。有帮助吗？