반응의 getElementById

반응의 getElementById

현재 이 오류는 다음과 같이 표시됩니다.

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를 가져와 해당 값을 읽고 null이 아님을 확인하려면 어떻게 해야 합니까?

요소를 읽으려고 하면 DOM이 로딩되는 것 같은데 왜 null인지 알 수 없습니다.

이 기능을 사용할 필요가 있습니다.componentDidMount이것은 DOM이 로드되었을 때 호출되는 함수이기 때문에 라이프 사이클입니다.

을 활용하다refsDOM 요소에 액세스하다

<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 요소에 액세스하는 방법에 대한 자세한 내용은 이 답변을 참조하십시오.

Diff and Put을 해야 할 수도 있습니다.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.

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;

언급URL : https://stackoverflow.com/questions/40256673/getelementbyid-in-react