[英]React is not changing the state of the parent element
我在react中构建了一个简单的todo应用程序,并且将输入字段作为inputForm元素的一部分作为子元素。
我可以毫无问题地将函数作为道具从父级传递到子级,但是我无法更新父级状态以在输入字段上存储值。 当我在输入字段中键入内容时,传递的函数可以正常执行,但currentTodo状态不会更新。
我发现可以通过使用单个数据流模式(例如Flux或Reflux)来避免此问题,但是由于这是我的第一个项目,因此我想了解如何使用基础知识。
父元素的代码:
import React, { Component } from 'react';
import './App.css';
import InputForm from '../components/InputForm'
import {Task} from '../components/Task'
class App extends Component {
constructor(){
super();
this.state = {
tasks: ["Todo", "Toda"],
currentToDo: "",
};
}
//makes copy of task array, pushes current to do to copy and setsState
//with new values
addTodo = () => {
console.log("addTodo")
let copy = this.state.tasks.slice();
console.log(this.state.currentToDo)
copy.push(this.state.currentToDo);
this.setState({tasks: copy});
}
//gets input value from input field and updates current todo
onInputChange = e => {
console.log(e.target.value);
this.setState({ currentTodo: e.target.value })
}
render() {
let drawTask = this.state.tasks.map(e => {
return <Task todo={e}/>
})
return (
<div className="container">
<InputForm onInputChange={() => this.onInputChange} add={this.addTodo}/>
{drawTask}
</div>
);
}
}
export default App;
子元素的代码:
import React, { Component } from 'react';
import './component.css';
import {AddButton} from './Buttons.js'
class InputForm extends Component{
constructor(){
super();
this.state = {
}
}
render(){
return(
<div className='taskHeader'>
{/*Value of current todo is send as props from parent element*/}
<input value = {this.props.currentToDo} onChange={this.props.onInputChange()} type="text"/>
<AddButton add = {this.props.add}/>
</div>
)
}
}
export default InputForm;
您正在渲染期间调用该函数,而不是传递引用。
父母拥有该功能,需要将其传递给孩子:
<InputForm onInputChange={this.onInputChange} add={this.addTodo}/>
现在,孩子有了一个名为onInputChange的道具,您可以将其传递给onChange回调作为参考。
<input value={this.props.currentToDo} onChange={this.props.onInputChange} type="text"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.