Question

在下面的代码中，有人可以建议如何访问存储在传递给子closeModal组件的QRScan道具中的函数吗？

我在this.props.closeModal.bind(this)的构造函数中尝试了QRScan，但当我在this.props.closeModal()函数中调用_onBarCodeRead时，出现undefined is not an object (evaluating 'this.props.closedModal')错误。

道具肯定会被传递给构造函数，我似乎无法正确绑定函数。任何帮助非常感谢！

class Test extends React.Component {

constructor(props) {
   super(props);
 }

_test(){
  console.log("test worked")
}

render() {
  return (
    <View>
      <QRScan closeModal={this._test}/>
    </View>
  }
}

儿童班：

class QRScan extends React.Component {

constructor(props)
{
 super(props)
 console.log(this.props)
 this.props.closeModal.bind(this);
}

render() {
   return (
    <BarcodeScanner
      onBarCodeRead={this._onBarCodeRead}
      width={windowWidth}
      height={windowWidth * cameraAspectRatio}
      style={styles.camera}>
      <View style={styles.rectangleContainer}>
        <View style={styles.rectangle} />
      </View>
    </BarcodeScanner>
  );
 }
 _onBarCodeRead(e) {
   console.log(e);
   Vibration.vibrate();
   this.props.closeModal();
  }
}

Answer 1

绑定函数不会就地修改函数。相反，它返回结果函数，您可以将其赋值给变量。

所以从理论上讲，你可以做this.props.closeModal = this.props.closeModal.bind(this);，但那不会起作用。所以我建议在类上创建一个方法，绑定它，然后从那里访问道具。例如：

class QRScan extends React.Component {

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

当然，一般建议的做事方式是建议在课堂上保留this，而不是将其传递给道具方法。

为了让您的代码正常运行，我想您必须使用this._onBarCodeRead方法执行相同的绑定。

Answer 2

问题实际上是this._onBarCodeRead未正确绑定。

在子组件的构造函数中，您需要添加以下内容 this._onBarCodeRead = this._onBarCodeRead.bind(this);

如何绑定到通过prop传递给子组件的函数，以便我可以在子组件的函数中调用它

2 个答案: