Question

我刚刚熟悉React Native。使用这样的设置，我能够将一个从子项传递到其父项：

子：

<TouchableOpacity onPress={() => {this.props.click("Cool.")}}>

父：

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

click(c) {
  console.log(c) // "Cool."
}

render() {
  return (
    <View>
      <Child click={this.click}>
    </View>
  }
}

但是，如果我将Parent的回报更改为：

<View>
  <Child click={this.props.click}>
</View>

然后使用祖父组件：

<View>
  <Parent click={this.click}>
</View>

我没有收到点击事件，但是错误"_this2.props.click is not a function"将子元素更改为<TouchableOpacity onPress={this.props.click}>似乎阻止了事件的处理。

最终，我想让一个子元素触发一个Great-Grandfather级别的事件处理程序，以修改根级别的状态并向下级联更改。

Answer 1

您可以使用ref访问孩子的方法。你可以在here中看到这个文件。使用ref的简单示例如下所示：

class Child extends Component {
  open = () => {
    this.props.setVisible(true)
  }

  render () { 
    <View ref={this.props.refFunc}>
      ...
    </View>
  }
}

class Parent extends Component {
  _ref = (e) => { this._child = e }

  runFunction = () => {
    this._child.open(); // you can use the open function of child here
  }

  render () { 
    ...
    <Child refFunc={this._ref}>
    ...
  }
}

当您想要修改子项中的父项时，您应该定义一个函数并将其作为prop传递给子组件，并将其用于子组件中的onPress之类的事件。要做到这一点，示例代码将是这样的：

class Parent extends Component {
  state = {someState: value}

  changeStateValue = (val) => {
    this.setState({someState: val})
  }

  render () { 
    ...
    <Child changeState={this.changeStateValue}>
    ...
  }
}

class Child extends Component {

  changeParentState = (val) => () => {
    this.props.changeState(val)
  }

  render () { 
    ...
    <TouchableHighlight onPress={this.changeParentState(value)}>
    ...
    </TouchableHighlight>
    ...
  }
}

通过这种方式，您可以从子组件访问父状态。

将事件从子元素传递给曾祖父

1 个答案: