javascript - 访问 DOM 节点的引用时，React Refs 返回 null 或未定义

Question

TypeError: Cannot read property 'value' of null
App._this.check_input_value
src/App.js:36
  33 | 
  34 | check_input_value = () => {
  35 | 
> 36 |     if (this.ref1.current.value != undefined && this.ref1.current.value != null) {
  37 |         console.log(this.ref1.current.value);
  38 |     }
  39 | }

我还尝试仅测试一种条件(分别为 != null 和未定义)。同样的错误，除了我认为在测试 != null 时仅表示属性未定义。

放入 if 语句是为了解决未定义/空值错误，删除它只会在下一个语句中产生相同的错误。

我从引用的输入中的默认值开始，因此这不应该成为问题:

// inside render()
<form action="">
      <input
         type="text"
         ref={this.ref1}
         value='10'
         onChange={(e) => this.update_input_field(e)} />
      <button
          onClick={this.check_input_value()} >
          Check input value
      </button>

// Towards the top of the component, outside the constructor:
ref1 = React.createRef();

我还尝试在构造函数内设置 this.ref1 = React.createRef() 。同样的错误。

constructor(props) {
    super(props);

    this.ref1 = React.createRef();
}

有谁知道为什么 this.ref1.current 返回 undefined 或 null？

也欢迎任何上述问题的解决方案，谢谢。

Answer 1

您只能在 componentDidMount 之后访问 ref。我发现这里有一个错误:

<button
  onClick={this.check_input_value()} >
  Check input value
</button>

在 componentDidMount 之前且 ref1 为 null 之前，this.check_input_value 将在渲染时而不是 onClick 时调用。改成这个就可以了

<button
  onClick={this.check_input_value} >
  Check input value
</button>