Вызов дочерней функции из Parent React Native - TypeError не может прочитать свойство null

Question

У меня есть родительский компонент, у которого есть компонент фильтра, а у компонента фильтра есть компонент FilterBox с кнопкой на нем. Родительский> Фильтр> 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")
  }
}

Я получаю свойство «onButtonPress» не может прочитать значение null

Answer 1

Вы можете сделать следующее. Я воспроизвожу его в React, поэтому конвертирую кнопки в TouchableOpacity и onPress в onClick.

Он передает функцию из фильтра в блок фильтров в качестве опоры, и когда вы вызываете эту функцию из componentDidMount блока фильтров, он устанавливает состояние компонента фильтра и передает функцию onButtonPress в this.state.propFun c.

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