从父组件获取子组件属性

Question

我正在使用以下React Native模块： https://github.com/shariqahmed1/react-native-animated-tree-view

我想从TreeView中获得点击的项目。

文档说我应该可以通过onClick prop获得点击的项目。

我的尝试是这样的：

<TreeView
 onPress={() => console.log(props.onClick)} //Cannot get clicked item
 data={data} //Works Okay
/>

我能够成功提供源数据，但是我无法从树形视图中获得单击的项目。

如何从父组件获取子组件值？

Answer 1

您可以使用Ref/createRef为它提供唯一的引用（就像ID）一样，然后就可以使用它：

 class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

在onclick事件处理程序中，使用this.onClick()代替props.onClick()，在this.onClick中，您可以使用this.textInput。 current 访问子组件。组件。

Answer 2

您应根据文档使用onClick代替onPress来获得点击项：

onClick={props.onClick} // <-- will call parent component's onClick

// OR

onClick={(item) => props.onClick(item)}  // <-- will call parent component's onClick

要检查控制台，请尝试以下代码：

onClick={(item) => { console.log(item); }}