javascript - React 中的 getElementById

标签 javascript reactjs null getelementbyid

此时出现此错误:

未捕获的类型错误:无法读取 null 的属性“值”

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

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

我也试过在这里调用它

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

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

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

最佳答案

您需要在 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);
  }

有关 How to access the dom element in React 的更多信息,请参阅此答案

关于javascript - React 中的 getElementById,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40256673/

相关文章:

java - 检查 NULL 是好事还是坏事?

PHP 检查 NULL

mysql - 使用默认值 NULL 好吗?

javascript - 如何重用 EDGE.js 中的代码(nodeJS .NET 数据包)

Javascript迭代器设计模式

reactjs - 如何在React/Webpack中创建代理来调用外部API

javascript - 如何将 JSX 组件与 dangerouslySetInnerHTML 结合

javascript - 将 <object> 用于 SVG 并从 HTML 内联 css 以编辑填充

javascript - 火狐浏览器 : execute javascript in xslt

reactjs - 使用 React Router 加载组件 你不应该在 <Router> 之外使用 <Link>