Question

我有一个React组件，它利用带有每个表单元格自定义复选框的react-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'”。任何帮助或建议，将不胜感激。

Answer 1

您可以使用函数createRef创建对输入的引用。

indeterminate是一个必须从javascript本身设置的属性，它依赖于示例中的props，这种情况的发生在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>

如何在React中引用此引用？

1 个答案: