React 发送 child 输入数据以更新 parent 状态

Question

设置： 我已经在 parent child 关系中设置了两个反应组件。 parent 有一个状态，可以通过按下 parent 本身的按钮来改变。

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

我尝试过的方法： 我浏览了 answer and this youtube 视频，但我想我不够聪明，无法理解它。

这就是我的代码的样子 Parent:

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 对象（以防使用 Class 组件）并编写方法以避免膨胀render 一个（一定要在构造函数上绑定额外的方法以避免调用问题）

Answer 2

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

  class Parent 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 组件中我们调用我们传入 props 的 Parents 函数并发送值。

  class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Childvalue: ''
    };
  }
  handleChange = event => {
    event.preventDefault();
    this.setState({ Childvalue: event.target.value });
  };
  sendToParent = () => {
    //here calling Parents changeValue
    this.props.getChildInputOnSubmit(this.state.Childvalue);
  };
  render() {
    return (
      <div>
        This is the child Component
        <br></br>
        <form action='#' onSubmit={this.sendToParent}>
          <input
            type='text'
            placeholder='Some placeholder'
            value={this.state.Childvalue}
            onChange={this.handleChange}
          ></input>
          <button type='submit'>Send child's input to parent</button>
        </form>
      </div>
    );
  }
}

React 发送 child 输入数据以更新 parent 状态

React Send child input data to update parent state

reactjs

react-component