时间戳

首页 > 解决方案 > React - event.target 未定义/空

javascript - React - event.target 未定义/空

问题描述

我正在使用 React Hooks。我想将状态更新为一个使用 event.target、event.name 的函数。

但是处理函数中的事件对象返回 undefined(Both event.target, event.name) 所以状态没有更新。

你能告诉我原因吗？请给一些建议。（我不习惯英语。如果你觉得不舒服我很抱歉）

这是我的代码：（在相同的 js 文件中，相同的功能组件中）

从 material-ui 导入滑块和输入

import Slider from "@material-ui/core/Slider";
import Input from "@material-ui/core/Input";

变量

const Mainpage = () => {
  const [squares, setSquares] = useState([
    {
      top: 20,
      left: 0,
      shadowX: 0,
      ...
    },
    ...
  ]);

  const [isSquareClick, setIsSquareClick] = useState(false);

  const [divNow, setDivNow] = useState(0);

处理功能：

const handlingFocus = (index) => {
  setIsSquareClick(true);
  setDivNow(index);
};

const handleChange = (e) => {
    console.log(e.target.value); // undefined
    console.log(e.target.name); //undefined
    console.log(squares[divNow].shadowX); // 0(deault value)
    console.log(divNow); // 0
    if (e.target.value !== "") {
      setSquares(
        squares.map((item) =>
          item.id === divNow
            ? { ...item, [e.target.name]: parseInt(e.target.value) }
            : item
        )
      );
    }
  };

JSX：

Shadow X :   
          <Slider
            defaultValue={0}
            min={-100}
            max={100}
            style={{ width: "60%" }}
            value={
              typeof squares[divNow].shadowX === "number"
                ? String(squares[divNow].shadowX)
                : 0
            }
            aria-labelledby="input-slider" 
            onChange={(event) => {
              handleChange(event);
            }}
            name="shadowX"
          />
          <Input
            style={{ width: "10%", marginLeft: "5%" }}
            value={String(squares[divNow].shadowX)}
            margin="dense"
            onChange={(event) => {
              handleChange(event);
            }}
            inputProps={{
              step: 0.5,
              min: -100,
              max: 100,
              type: "number",
              "aria-labelledby": "input-slider",
            }}
            name="shadowX"
          />

我知道为什么！！event.target 没有返回输入... :(... 有时它返回 div 或 span 或输入...

标签： javascriptreactjsreact-hooks

解决方案

我正在使用替代方式，将值直接传递给处理函数。

例如，我正在编写分页组件

for (let idx = startIdx; idx < endIdx; idx++) {
  const offset = idx + 1;
  render.push(
    <Button
      key={`page-${offset}`}
      onClick={() => handlePageClick(idx)}
    >
      {offset}
    </Button>
  );
}

const handlePageClick = (value) => {
  console.log(`page request: ${value}, current page: ${currentPage}`);
  // Do sth here ._.
}

推荐阅读