我正在用 React 构建简单的待办事项应用程序,我已将输入字段作为子元素 inputForm 元素的一部分。
我可以毫无问题地将函数作为 props 从父级传递给子级,但我无法更新父级状态以在输入字段上存储值。当我在输入字段中键入时,传递的函数正常执行但 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}/>
现在 child 有一个名为 onInputChange 的 Prop ,您将它作为引用传递给 onChange 回调。
<input value={this.props.currentToDo} onChange={this.props.onInputChange} type="text"/>
关于javascript - React 不会改变父元素的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49093536/