javascript - 从父到子 react 使用引用

Question

我在 react.js 中使用 jqwidget for grid。我的 JqxListBox 在我的父组件中有一个选项列表。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <JqxListBox ref='myListBox' style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />;
  }
}

当用户在 jqxlistbox 中选择或取消选择某些选项时，我想在网格中打开显示和隐藏列，但在子组件中未访问 refs。如何访问子组件 react 中的 jqxlistbox 属性。在子 componentDidMount 函数中，我正在访问 ref。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // Cannot read property 'on' of undefined
    this.refs.myListBox.on('checkChange', (event) => {
      console.log("something");
    });
  }

  render() {
    return <div>Child component</div>;
  }
}

它给我错误:TypeError: Cannot read property 'on' of undefined

Answer 1

他们访问refs的方式在 React 16.3.2 中已更改:

这是你应该设置的方式:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    // Declare and initialize the ref in the constructor
    this.myListBox= React.createRef();
  }

  componentDidMount() {
    // Access the ref
    this.myListBox.on('checkChange', (event) => {
      this.props.onEventFromParentComponent(event);
    });
  }

  render() {
    return <JqxListBox ref={this.myListBox} style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />;
  }
}