javascript 在React中按Id获取元素

sxpgvts3  于 2023-01-19  发布在  Java
关注(0)|答案(3)|浏览(203)

当前获取此错误:
Uncaught TypeError: Cannot read property 'value' of null
我在下面的render函数中调用它:

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

我也试着打电话到这里

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

我如何获得输入文本字段的id并读取该值并确保它不为空?
我认为DOM是在我尝试读取元素之后加载的,因此它为null

nwlls2ji

nwlls2ji1#

您需要在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元素的更多信息,请参见此答案

kqlmhetl

kqlmhetl2#

你可能需要执行一个diff并把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

ig9co6j1

ig9co6j13#

import React, { useState } from "react";

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

export default App;

相关问题