如何将信息从子组件传递到父组件中的函数？ （本机反应）

Question

我有一个带有10个按钮的演示性子组件，像这样

  <Button onPress={...} title="1" />
  <Button onPress={...} title="2" />
  <Button onPress={...} title="3" />
  ...

我在父组件中有一个函数，需要知道每个按钮的编号。

checkNumber(e) {
  ...
  return number
}

如何在不编写10个函数的情况下从子组件的按钮获取编号？

Answer 1

您正在寻找一个称为React或react-native的回调的概念

您将在父组件中具有事件处理程序功能。如果事件处理函数是常规函数，那么请确保将其绑定到构造函数中或将其更改为箭头函数

由于您使用的是正常函数，因此需要在构造器中进行绑定

  constructor(props){
      super(props);
      this.checkNumber = this.checkNumber.bind(this);
  }

  checkNumber(e, number){
       ...
     return number
   }

或使用箭头功能。您无需在构造函数中手动绑定

  checkNumber = (e, number) => {
       ...
     return number
   }

现在将checkNumber函数作为对像您的演示组件的支持

    <PresentationalComponent checkNumber={this.checkNumber} />

在您的演示文稿组件中

     <Button  onPress={e => this.props.checkNumber(e, 1)} title=“1”/>
    <Button onPress={e => this.props.checkNumber(e, 2)} title="2" />
      .......
      .......
      <Button onPress={e => this.props.checkNumber(e, 10)} title="10”/>

如果有错字，请原谅，因为我正在用手机接听：）