[英]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.