React中的getElementById

Question

此刻出现此错误:

Uncaught TypeError: Cannot read property 'value' of null

我在下面的渲染函数中调用它:

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData}/>

我也试过在这里调用它

componentWillMount: function(){
        var name = document.getElementById('name').value;
      },

如何获取输入文本字段的id并读取该值并确保它不为空？

我认为DOM在我尝试读取元素后加载,因此它为空

Answer 1

您需要在componentDidMount生命周期中拥有您的函数,因为这是在DOM加载时调用的函数.

利用refs访问DOM元素

<input type="submit" className="nameInput" id="name" value="cp-dev1" onClick={this.writeData} ref = "cpDev1"/>

  componentDidMount: function(){
    var name = React.findDOMNode(this.refs.cpDev1).value;
    this.someOtherFunction(name);
  }

有关如何访问React中的dom元素的更多信息,请参阅此答案