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 在我尝试读取元素后正在加载，因此它为 null

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);
  }

有关

的更多信息，请参阅此答案

Answer 2

您可能必须执行差异并将 document.getElementById('name') 代码放入条件中，以防您的组件是这样的：

// using the new hooks API
function Comp(props) {
  const { isLoading, data } = props;
  useEffect(() => {
    if (data) {
      var name = document.getElementById('name').value;
    }
  }, [data]) // this diff is necessary

  if (isLoading) return <div>isLoading</div>
  return (
    <div id='name'>Comp</div>
  );
}

如果不执行 diff，你将得到 null。

Answer 3

import React, { useState } from 'react';

function App() {
  const [apes , setap] = useState('yo');
  const handleClick = () =>{
    setap(document.getElementById('name').value)
  };
  return (
    <div>
      <input id='name' />
      <h2> {apes} </h2>
      <button onClick={handleClick} />
  </div>
  );
}

export default App;

React 中的 getElementById

getElementById in React

javascript

null

getelementbyid

reactjs