>source

내 옵션의 값을 가져 오려고합니다/향후 상태에서 사용하도록 선택했지만 ID로 요소를 가져 오려고하면 "null의 속성 '값'을 읽을 수 없습니다."라는 오류가 발생합니다.

import React from "react";
function Inputs() {
  const Period = document.getElementById("Period");
  console.log(Period);
  const inputHandler = (inputName) => {
    console.log(inputName.value);
  };
  return (
    <div>
      <label>Period:</label>
      <select id="Period" onChange={() => inputHandler(Period)}>
        <option>Last 12 month</option>
        <option>Last 6 month</option>
        <option>Last month</option>
      </select>
    </div>
  );
}
export default Inputs;

SandBox에 연결

  • 답변 # 1

    아래 솔루션을 확인하십시오.

    import React from "react";
    function RechartsInputs() {
      const Period = document.getElementById("Period");
      console.log(Period);
      const inputHandler = (e) => {
        console.log(e.target.value);
      };
      return (
        <div>
          <label>Period:</label>
          <select id="Period" onChange={e => inputHandler(e)}>
            <option>Last 12 month</option>
            <option>Last 9 month</option>
            <option>Last 6 month</option>
            <option>Last 3 month</option>
            <option>Last month</option>
          </select>
        </div>
      );
    }
    export default RechartsInputs;
    
    

    도움이되기를 바랍니다;D

  • 답변 # 2

    당신의 논리가 잘못되었습니다. 이것을 따르십시오. 사용하다 useEffectuseState .

    import React, { useEffect, useState } from "react";
    function RechartsInputs() {
      const [val, setVal] = useState(null);
      useEffect(() => {
        console.log(val);
      }, [val]);
      const inputHandler = (event) => {
        setVal(event.target.value);
      };
      return (
        <div>
          <label>Period:</label>
          <select id="Period" onChange={inputHandler}>
            <option>Last 12 month</option>
            <option>Last 9 month</option>
            <option>Last 6 month</option>
            <option>Last 3 month</option>
            <option>Last month</option>
          </select>
        </div>
      );
    }
    export default RechartsInputs;
    
    

  • 답변 # 3

    사용하지 않는 것이 좋습니다. document.getElementById 이런 식으로 React로.

    HTML을 생성하기 위해 컴포넌트가 반환하는 모든 태그를 읽고 JavaScript로 컴파일하는 템플릿 엔진 인 jsx를 사용하고 있음을 이해해야합니다. 그래서 당신이하는 일은 렌더링되기 전에 요소를 쿼리하려고 시도하는 것이므로 null이 발생합니다.

    다음과 같은 수명주기 콜백을 사용할 수 있습니다. componentDidMount 또는 같은 후크 useEffect HTML이 렌더링되었을 때 알림을 받고 document.getElementById 그러나 이와 같은 요소에 액세스하는 것은 권장되지 않습니다.

    요소에 대한 참조를 얻으려면 요소에 대한 처리기를 만드는 것이 더 낫더라도 참조를 사용할 수 있습니다. onChange 이벤트 및 이벤트 대상에서 값을 가져옵니다.

  • 답변 # 4

    그 시점에서 렌더 전에 입력에 액세스하려고하면 분명히 null

    사용 event.target 입력에 액세스하려면

    import React from "react";
    function Inputs() {
      const inputHandler = (e) => {
        console.log(e.target.value);
      };
      return (
        <div>
          <label>Period:</label>
          <select id="Period" onChange={(e) => inputHandler(e)}>
            <option>Last 12 month</option>
            <option>Last 6 month</option>
            <option>Last month</option>
          </select>
        </div>
      );
    }
    export default Inputs;
    
    

관련 자료

  • 이전 javascript - 메시지를 보낸 사람의 이름을 인쇄하는 " 'user'is null"오류가 표시됩니다
  • 다음 python - 웹 페이지에서 모든 제목을 가져올 수 없습니다