React Native-從父按鈕onPress執行子功能

Question

免責聲明：我是RN的新手。 到目前為止，我已經測試了其他類似問題的多個解決方案，但均未成功。

我有一個父母像這樣渲染兩個孩子

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？

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

希望能幫助到你

Answer 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();
    }
  }
}

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