开发者问题收集

无法读取 null 的属性“值”，第一次渲染时出错

2020-11-30
371
javascript reactjs

我尝试获取选项/选择的值，以便将来在状态中使用它，但是当我尝试通过 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

3个回答

查看下面的解决方案： 

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

Grazielle Carvalho
2020-11-30

你的逻辑是错误的。按照这个。 使用 useEffect 和 useState 。 

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;
wangdev87
2020-11-30

不建议以这种方式在 React 中使用 document.getElementById 。

您需要了解您正在使用 jsx ，这是一个模板引擎，它读取您的组件返回的所有标签并将其编译为 JavaScript 以生成 HTML。因此，您正在做的是在元素呈现之前尝试查询它，这就是您得到 null 的原因。

您可以使用 生命周期回调 （如 componentDidMount ）或 钩子 （如 useEffect ）以便在呈现 HTML 时收到通知，然后使用 document.getElementById ，但不建议访问这样的元素。

为了获取对元素的引用，您可以使用 refs 尽管最好为 onChange 事件创建一个处理程序并从事件目标中获取值。

user1
2020-11-30