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和undefined分别）。相同的错误，只是我认为在测试！= 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

未设置ref1的原因是因为您在渲染上立即调用了check_input_value：

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

您应该改为给onClick函数引用，以便事件发生时可以调用该函数。通过ref1的这种设置方式，因为它是在第一个渲染之后设置的，并且事件处理程序将在您期望的时间调用。

示例

class App extends React.Component {
  ref1 = React.createRef();

  check_input_value = event => {
    event.preventDefault();
    console.log(this.ref1.current.value);
  };

  render() {
    return (
      <form onSubmit={this.check_input_value}>
        <input type="text" ref={this.ref1} />
        <button>Check input value</button>
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您只能在componentDidMount之后访问引用。我在这里发现一个错误：

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

this.check_input_value和ref1为null之前，将在渲染而不是onClick时调用componentDidMount。只需更改为此

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

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

2 个答案: