反应使用从父母到孩子的参考

Question

我在 react.js 中将 jqwidget 用于网格。我有 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 中选择或取消选择某个选项时，我想在网格中打开显示和隐藏列，但在子组件中无法访问参考。如何在子组件 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} />;
  }
}