处理程序方法是否可以访问另一个处理程序方法属性?

Question

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

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

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

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

我尝试全局声明一个变量(newTask(并将输入数据保存在其中。后来尝试在任务数组列表中推送数据。但它不起作用。

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