Реагировать использовать ссылки от родителя к ребенку - PullRequest
Новая
       13

Реагировать использовать ссылки от родителя к ребенку

0 голосов
/ 25 апреля 2018

Я использую jqwidget для grid в activ.js. У меня есть 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, я хочу открыть шоу и скрыть столбец в сетке, но ссылки не доступны в дочернем компоненте. Как получить доступ к свойству jqxlistbox в дочернем компоненте реакции. В дочерней функции componentDidMount я получаю доступ к ссылке, как. 

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: Невозможно прочитать свойство 'on' из неопределенного

1 Ответ

0 голосов
/ 25 апреля 2018

У них способ доступа ссылки изменился в 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} />;
  }
}
...