时间戳

首页 > 解决方案 > 从父 React Native 调用子函数 - TypeError 无法读取 null 的属性

reactjs - 从父 React Native 调用子函数 - TypeError 无法读取 null 的属性

问题描述

我有一个父组件，它有一个过滤器组件，过滤器组件有一个过滤器框组件，上面有一个按钮。Parent > Filter > FilterBox FilterBox 有一个按钮，点击时会调用 onButtonPress 函数。我想从过滤器组件中调用这个 onButtonPress 函数。尝试使用 refs 也尝试在构造函数中绑定函数。仍然出现错误。

 class Filter extends Component {
  constructor() {
    super();
    this.child = React.createRef();
  }
    render() {
    return (
        <View>
            <FilterBox
            //props
            ref = {this.child}
            />
            <TouchableOpacity
            onPress={()=>this.child.current.onButtonPress()}/>
        </View>

    )
}
 class FilterBox extends Component {
  constructor() {
    super();
    this.onButtonPress = this.onButtonPress.bind(this);
  }
  onButtonPress = () =>{
    console.log("Hi")
  }
}

我得到一个无法读取 null 的属性“onButtonPress”

标签： reactjsreact-native

解决方案

您可以执行以下操作。我在反应中重现它，因此将按钮转换为 TouchableOpacity，将 onPress 转换为 onClick。

它所做的是将一个函数作为道具从过滤器传递到过滤器盒，当您从过滤器盒的 componentDidMount 调用该函数时，它会设置过滤器组件的状态并将 onButtonPress 函数提供给 this.state.propFunc。

class Filter extends Component {
constructor() {
    super();
    this.child = React.createRef();
    this.state = {
        propFunc: null
    }
    this.funcToPass = this.funcToPass.bind(this)
}

funcToPass(fn) {
    this.setState({ propFunc: fn })
}
render() {
    return (
        <div>
            <FilterBox
                funcToPass={this.funcToPass}
            />
            {this.state.propFunc != null && <button onClick={this.state.propFunc} />}
        </div>

    )
}
}
class FilterBox extends Component {
constructor() {
    super();
}
onButtonPress = () => {
    console.log("Hi")
}
componentDidMount() {
    this.props.funcToPass(this.onButtonPress)
}

render() {
    return (
        <div>

        </div>
    )
}
}

推荐阅读