React 多次将数据从同一个子组件传递给父组件

Question

嗨，我想多次将数据从同一个子组件传递给父组件。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stateVariabes:null
    };
    // callback from parent
    this.props.onSelect(this.state);
  }

  handleChange(event) {
    const value =  event.target.value;
    this.setState(
      {
        stateVariabes: value
      },
      function() {
        console.log(this.state);
        // callback from parent
        this.props.onSelect(this.state);
      }
    );
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childOne: null,
      childList: [],
      childOther: null

    };
  }
  childCallbackFunction = childData => {
     // which child state shall I set here 
    this.setState({ weekDay: childData });
  };

  render() {
    return (
      <div className="App">
        <ChildComponent onSelect={this.childCallbackFunction} />
        <ChildComponent onSelect={this.childCallbackFunction} />
        <ChildComponent onSelect={this.childCallbackFunction} />
        <ChildComponent onSelect={this.childCallbackFunction} />
      </div>
    );
  }
}

当我只使用一个ChildComponent 时，从子组件到父组件的状态更新按预期工作，但是当我在父组件的渲染中有多个 ChildComponent 时，状态更新不会发生。

有人可以建议什么是完成任务的正确方法吗？

Answer 1

当使用 Class 组件时，你需要绑定你的方法。 来自 React 文档：

在 JavaScript 中，默认情况下不绑定类方法。 如果忘记绑定this.handleClick并将其传递给onClick ，则实际调用该函数时this将是未定义的。

所以，在你的情况下，你的ChildComponent应该有一个

this.handleChange = this.handleChange.bind(this);

您还应该从构造函数中删除它，因为它在初始化时调用您的回调：

// callback from parent
this.props.onSelect(this.state);

这是一个工作示例： https : //codesandbox.io/s/intelligent-night-xlhzj

此链接中的更多信息。

Answer 2

您可以将键传递给多个子组件，例如：

<ChildComponent onSelect={this.childCallbackFunction} key=1 />
 <ChildComponent onSelect={this.childCallbackFunction} key=2 />
<ChildComponent onSelect={this.childCallbackFunction} key=3 />
 <ChildComponent onSelect={this.childCallbackFunction} key=4 />

希望它应该工作。

Answer 3

这是它应该怎么做。

孩子=>

class ChildCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateVariabes: null
    };
  }

componentDidMount() {

this.onSelect()
}




  onSelect = () => {
    const value = 'some value coming from your event';
    this.props.trigger(value);
  };

父=>

class ParentCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childOne: null,
      childList: [],
      childOther: null,

    };
  }

  childCallbackFunction = childData => {
    // you can do anything with your child component values here
   console.log('child value: ', childData)
  };

  render() {
    return (
      <div className='App'>
        <ChildCom trigger={this.childCallbackFunction} />
        <ChildCom trigger={this.childCallbackFunction} />
        <ChildCom trigger={this.childCallbackFunction} />
        <ChildCom trigger={this.childCallbackFunction} />
      </div>