React不会改变父元素的状态-Java 学习之路

我正在构建简单的待办事项应用程序，我已将输入字段作为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;

1 回答

2

您在渲染过程中调用该函数而不是传递引用 .

父拥有该功能，需要将其传递给孩子：

<InputForm onInputChange={this.onInputChange} add={this.addTodo}/>

现在孩子有一个名为onInputChange的道具，你将它作为参考传递给onChange回调 .

<input value={this.props.currentToDo} onChange={this.props.onInputChange} type="text"/>

回复于 2024-04-29T17:47:26+08:00

React不会改变父元素的状态

1 回答

相关问题