主页 / 问题 / 1445726
Accepted
gorden
Asked:2022-09-05 01:17:39 +0000 UTC2022-09-05 01:17:39 +0000 UTC

React.js 输入值

  • 772

当您更改输入 X,Y 中的值时，会发出此警告

警告：组件正在将受控输入更改为不受控。这可能是由于值从定义变为未定义引起的，这不应该发生。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。更多信息：https ://reactjs.org/link/controlled-components

在您已经更改了数字并且想要移动 div 之后，X 或 Y 会非常快速地增加其值并且 div 会超出窗口警告 (2)

警告：收到value属性的 NaN。如果这是预期的，请将值转换为字符串。

codeandbox.io 上的代码在这里

import "./styles.css";
import React, { useRef, useState, useEffect } from "react";

const appStyle = {
  fontFamily: "sansSerif",
  textAlign: "center",
  userSelect: "none"
};

const inputCStyle = {
  width: "100px",
  height: " 30px",
  fontSize: "4vw",
  position: "relative",
  top: "0",
  left: "0",
  display: "flex",
  cursor: "pointer"
};

const h1Style = {
  display: "block",
  margin: "0",
  padding: "0",
  marginLeft: "20px",
  paddingRight: "10px"
};

const quickAndDirtyStyle = {
  width: "200px",
  height: "200px",
  background: "#FF9900",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

export default function App() {
  const [pressed, setPressed] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const ref = useRef();

  // Monitor changes to position state and update DOM
  useEffect(() => {
    if (ref.current) {
      ref.current.style.marginLeft = `${position.x}px`;
      ref.current.style.marginTop = `${position.y}px`;
    }
  }, [position]);

  // Update the current position if mouse is down
  const onMouseMove = (event) => {
    if (pressed) {
      setPosition({
        x: position.x + event.movementX,
        y: position.y + event.movementY
      });
    }
  };

  const handleChange = (e, type) => {
    setPosition({
      [type]: e.target.value
    });
  };

  const inputCP = useRef();
  const editItemCP = () => {
    inputCP.current.select();
  };

  return (
    <div className="App" style={appStyle}>
      <div style={{ display: "flex" }}>
        <h1 style={h1Style}>X</h1>
        <input
          style={inputCStyle}
          className="inputC"
          type="number"
          value={position.x}
          ref={inputCP}
          onClick={editItemCP}
          onChange={(e) => handleChange(e, "x")}
        />
        <h1 style={h1Style}>Y</h1>
        <input
          style={inputCStyle}
          className="inputC"
          type="number"
          value={position.y}
          onChange={(e) => handleChange(e, "y")}
        />
      </div>
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)"
        }}
      >
        <div
          ref={ref}
          style={quickAndDirtyStyle}
          onMouseMove={onMouseMove}
          onMouseDown={() => setPressed(true)}
          onMouseUp={() => setPressed(false)}
          onMouseLeave={() => setPressed(false)}
        >
          <p>{pressed ? "Dragging..." : "Press to drag"}</p>
        </div>
      </div>
    </div>
  );
}
javascript

0 个回答

  1. Best Answer

    第一个问题是 with [type]: e.target.value，它value存储的是字符串，而不是数字。正如@Excess gophers的评论中所建议的那样，我们通过用 ore.target.value替换来解决这个问题。 第二个问题是之后：Number(e.target.value)e.target.valueAsNumber

    setPosition({
  [type]: e.target.value
});

    状态包含一个只有一个属性的对象（比如说{x: 100}or {y: 100}），为了避免这种情况，您需要使用[type]: e.target.value或者将旧状态解包到一个新对象中[type]: Number(e.target.value)。

    import "./styles.css";
import React, { useRef, useState, useEffect } from "react";

const appStyle = {
  fontFamily: "sansSerif",
  textAlign: "center",
  userSelect: "none"
};

const inputCStyle = {
  width: "100px",
  height: " 30px",
  fontSize: "4vw",
  position: "relative",
  top: "0",
  left: "0",
  display: "flex",
  cursor: "pointer"
};

const h1Style = {
  display: "block",
  margin: "0",
  padding: "0",
  marginLeft: "20px",
  paddingRight: "10px"
};

const quickAndDirtyStyle = {
  width: "200px",
  height: "200px",
  background: "#FF9900",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

export default function App() {
  const [pressed, setPressed] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const ref = useRef();

  // Monitor changes to position state and update DOM
  useEffect(() => {
    if (ref.current) {
      ref.current.style.marginLeft = `${position.x}px`;
      ref.current.style.marginTop = `${position.y}px`;
    }
  }, [position]);

  // Update the current position if mouse is down
  const onMouseMove = (event) => {
    if (pressed) {
      setPosition({
        x: position.x + event.movementX,
        y: position.y + event.movementY
      });
    }
  };

  const handleChange = (e, type) => {
    // Изменения
    setPosition((prev) => {
      return { ...prev, [type]: e.target.valueAsNumber }; // или же вместо e.target.valueAsNumber делаем Number(e.target.value)
    });
  };

  const inputCP = useRef();
  const editItemCP = () => {
    inputCP.current.select();
  };

  return (
    <div className="App" style={appStyle}>
      <div style={{ display: "flex" }}>
        <h1 style={h1Style}>X</h1>
        <input
          style={inputCStyle}
          className="inputC"
          type="number"
          value={position.x}
          ref={inputCP}
          onClick={editItemCP}
          onChange={(e) => handleChange(e, "x")}
        />
        <h1 style={h1Style}>Y</h1>
        <input
          style={inputCStyle}
          className="inputC"
          type="number"
          value={position.y}
          onChange={(e) => handleChange(e, "y")}
        />
      </div>
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)"
        }}
      >
        <div
          ref={ref}
          style={quickAndDirtyStyle}
          onMouseMove={onMouseMove}
          onMouseDown={() => setPressed(true)}
          onMouseUp={() => setPressed(false)}
          onMouseLeave={() => setPressed(false)}
        >
          <p>{pressed ? "Dragging..." : "Press to drag"}</p>
        </div>
      </div>
    </div>
  );
}
    • 1

相关问题