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

Question

Setup：我在父子关系中设置了两个React组件。父级的状态可以通过按父级本身上的按钮来更改。

预期的行为：在孩子中，我有一个输入字段，并且我希望状态更改为按下提交按钮后在输入字段中发送的值。我将父级和子级设置如下：

[我尝试过的事情：我浏览了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：

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行为鼓励在组件层次结构内实现逆向数据流。这意味着子组件可以通过prop接收父方法，该方法将用作回调，从而允许接收数据，触发行为，更新其状态等等。

我附上一个StackBlitz示例，展示了此概念在您的设置https://stackblitz.com/edit/react-jsv5jo中的工作方式>

Edit

：这里在示例中应用了一些额外的技巧：

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

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

• 关于React组件的另一种好的做法是在构造函数中初始化state对象（以防与类组件一起使用）并编写方法，以避免使render膨胀（请确保绑定额外的方法在您的构造函数上以避免调用问题）

Answer 2

回调用于将数据从子组件传递到React中的父组件。我们在父组件中设置了函数，该函数将接收值并将该函数通过Props传递给子组件。