Как мне сослаться на эту ссылку в React? - PullRequest
Новая
       11

Как мне сослаться на эту ссылку в React?

0 голосов
/ 20 декабря 2018

У меня есть компонент React, в котором он использует response-bootstrap-table с настраиваемыми флажками для каждой ячейки таблицы.Я пытаюсь убедиться, что все флажки сняты на componentDidMount, и для этого мне нужно настроить флажок ref.Тем не менее, компонент поставляется со следующим кодом для каждого флажка, и я не знаю, как я могу сослаться на эту ссылку: 

<input
          type={ type }
          name={ 'checkbox' + rowIndex }
          id={ 'checkbox' + rowIndex }
          checked={ checked }
          disabled={ disabled }
          onChange={ e=> onChange(e, rowIndex) }
          ref={ input => {
            if (input) {
              input.indeterminate = props.indeterminate;
           }
          }}
         />

Я пробовал несколько вариантов getDOMNode, но получаю сообщение об ошибке "Не удалось прочитать свойство 'getDOMNode' из неопределенного ".Буду признателен за любую помощь или совет.

1 Ответ

0 голосов
/ 20 декабря 2018

Вы можете использовать функцию createRef для создания ссылки на вход.

indeterminate - это свойство, которое должно быть установлено из самого javascript, опираясь на реквизитыкак в вашем примере, случай для этого был бы в componentDidMount жизненном цикле.

Вот демонстрация этого: 

const { Component, createRef } = React;
class App extends Component {
  constructor(props) {
    super(props);
    this.checkboxRef = createRef();
  }
  componentDidMount() {
    if(this.checkboxRef.current) {
      this.checkboxRef.current.indeterminate = this.props.indeterminate;
    }
  }
  render() {
    return (
      <input
        type="checkbox"
        ref={this.checkboxRef}
      />
    );
  }
}

ReactDOM.render(<App indeterminate={true} />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...