reactjs - React 发送子输入数据以更新父状态

Question

设置:我在父子关系中设置了两个 react 组件。 parent 有一个状态，可以通过按下 parent 本身的按钮来改变。

预期行为:在 child 中，我有一个输入字段，我希望状态更改为我在按下提交按钮时在输入字段中发送的值。我已经按如下方式设置了 parent 和 child :

我尝试过的:我经历了 this回答和this youtube 视频，但我想我不够聪明，无法理解它。

这是我的代码的样子父级:

class App extends Component {
  state = { 
    value:"someValue"
   };

   changeValue = (value) => {
     this.setState({
       value
     })    
   }

  render() {
    return (
      <div>
        <p>this is the value from state: {this.state.value}</p>
        <button onClick={()=>this.changeValue("valueFromParentComponent")}>Press to change value from parent component</button>
        <br/><br/>
        <Child getChildInputOnSubmit={()=>this.changeValue()} />
      </div>      
    );
  }
}

这就是 child 的样子

child :

class Child extends Component {
    state = {

    }
    sendChildData = (childInputValue) => {
        console.group("This is the data from the input of the child component")
        console.log("==============")
        console.log(childInputValue)
        console.log("==============")
    }


    render() {
        return (
            <div>
                This is the child component
            <br /><br />
                <form>
                    <input type="text" placeholder="Some placeholder"></input>
                    <button onSubmit={this.sendChildData()} type="submit">Send child's input to parent</button>
                </form>

            </div>);

    }
}

Answer 1

React 行为鼓励在组件层次结构中实现反向数据流。这意味着子组件可以通过 props 接收父方法，这些方法将作为回调工作，允许接收数据、触发行为、更新他的状态等等。

我附上了一个 StackBlitz 示例，展示了这个概念如何在您的设置中发挥作用 https://stackblitz.com/edit/react-jsv5jo

编辑:这里有一些应用于示例的额外提示:

• 要在 React 上处理输入，一个常见的设置包括监听 onChange 事件以接收新数据并更新组件状态。然后，在 value 属性中使用此状态来更新 DOM 上的输入内容。

• 在 form 标签而不是提交按钮上监听 onSubmit 事件，并记得添加一些逻辑以避免重新加载。

• React 组件的另一个好做法是在构造函数中初始化您的 state 对象(如果要使用类组件)并编写方法以避免膨胀 render 一个(一定要在构造函数上绑定(bind)额外的方法以避免调用问题)