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 em> 在Parent的渲染器中不会发生状态更新。

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

Answer 1

在使用Class组件时，您需要绑定方法。从React文档中：

在JavaScript中，默认情况下未绑定类方法。如果忘记绑定old_followers = 0 followers = driver.find_elements_by_xpath('//*[@role="dialog"]//ul/div/li') dialog = driver.find_element_by_xpath('//div[@class="isgrP"]') while old_followers != followers: old_followers = followers driver.execute_script("arguments[0].scrollBy(0,600)", dialog) time.sleep(2) driver.execute_script("arguments[0].scrollBy(0,600)", dialog) time.sleep(2) followers = driver.find_elements_by_xpath('//*[@role="dialog"]//ul/div/li') print(len(followers))并将其传递给this.handleClick，则在实际调用该函数时onClick将是未定义的。

因此，在您的情况下，您的this应该有一个

ChildComponent

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

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

这是一个有效的示例：https://codesandbox.io/s/intelligent-night-xlhzj

更多信息，this link。

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

这就是应该怎么做。

child =>

(df2.shape[0] + 2, df2.shape[1] - 1)

父母=>

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);
  };

从同一个子组件传递数据到父组件多次

3 个答案: