React Native - 从父按钮 onPress 执行子函数答案

【问题标题】：React Native - Execute child function from Parent Button onPressReact Native - 从父按钮 onPress 执行子函数
【发布时间】：2018-09-02 08:27:45
【问题描述】：

免责声明：我是 RN 新手。 我已经测试了其他 similar questions 的多个解决方案，但到目前为止都没有成功。

我有一个像这样渲染两个孩子的父母

export default class ParentComponent extends Component {

  constructor(props) {
       super(props)
  }

  render() {
    return (
      <View>
        <Foo name="a" ref={foo => {this.foo = foo}} {...this.props} />
        <Text>-----------</Text>
        <Foo name="b" />
        <Text>-----------</Text>
        <Button
          onPress={this.foo.myFunction()}
          title="Start"
          color="#841584"
        />
      </View>
    )
  }

}

我的类 Foo 里面有一个函数可以启动一些进程：

class Foo extends Component {
  myFunction(){
    // Some stuff here
  }
}

当我按下按钮时，如何为我的孩子调用这个myFunction？或者，是否可以仅使用一个 onPress 为两个 Child 调用该函数并避免为每个 Child 创建两个 Button ？

【问题讨论】：

为什么还要在这里使用孩子？在我看来，您要么不需要孩子，要么可以封装所有 Foo 逻辑及其组件，这对您来说不是问题。如果你决定你需要这个拱门，那么这是一个骗子：stackoverflow.com/questions/26176519/reactjs-call-parent-method
Call child function from parent component in React Native的可能重复
我测试了这个问题中提供的解决方案，但它不起作用。这是我在这里提出的解决方案之一

标签： javascript reactjs react-native components

【解决方案1】：

您可以使用refs https://reactjs.org/docs/refs-and-the-dom.html

例子：

class Parent extends Component {
  render() {
    return (
      <View>
        <Child ref={instance => { this.child = instance; }} />
        <TouchableOpacity onPress={() => { this.child.clicked(); }}>
          <Text>Click</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class Child extends Component {
  clicked() {
    alert('clicked');
  }

  render() {
    return (
      <Text>Hello</Text>
    );
  }
}

希望对你有帮助

【讨论】：

出现以下错误：未定义不是对象（正在评估“_this.child.clicked”）

【解决方案2】：

基本上我所做的就是在onPress 时调用一个本地函数并更改Parent 的状态。我在创建期间将此状态传递给 Child。而且由于在父状态更改时子会更新（如果需要），因此可以做到这一点。

export default class ParentComponent extends Component {

  constructor(props) {
       super(props)
       this.state = {
         activity: false
       }
  }

onButtonPress = () => {
    this.setState({
      activity: !this.state.activity
    });
  }

  render() {
    return (
      <View>
        <Foo name="a" activity={this.state.activity} />
        <Text>-----------</Text>
        <Foo name="b" activity={this.state.activity} />
        <Text>-----------</Text>
        <Button
          onPress={this.onButtonPress}
          title="Start"
          color="#841584"
        />
      </View>
    )
  }

}





class Foo extends Component {
  myFunction(){
    // Some stuff here
  }

  componentWillReceiveProps(newProps) {
    if (newProps.activity === true) {
      this.myFunction();
    }
  }
}

【讨论】：

【解决方案3】：

最好在ParentComponent和setState里面做myFunction逻辑，可以传入child的数据即：Foo。

    constructor(props) {
       super(props);
       this.state = {
          fooData: initialValue,
       }
    }


    myFunction = () => {
       // Some stuff here
       this.setState({ fooData: someValue })
    }

    render() {
      return (
        <View>
          <Foo name="a" data={this.state.fooData} {...this.props} />
          <Text>-----------</Text>
          <Foo name="b" data={this.state.fooData}/>
          <Text>-----------</Text>
          <Button
            onPress={this.myFunction}
            title="Start"
            color="#841584"
          />
        </View>
      )
    }

您可以在Foo 中进行相应的更改

class Foo extends Component {
      render() {
        const { data } = this.props;
        return(
          //Use data here to make change
        )
      }
    }

【讨论】：