Javascript 使用useState钩子更新对象

您好，我正在尝试将状态从表单传递到父组件中的我的

useState

hook，但在提交表单时没有发生任何事情。目的是当用户输入高度、宽度和颜色时，在屏幕上创建一个方框的视觉效果

表格编号：

const NewBoxForm = (props) => {

    const [height, setHeight] = useState();
    const [width, setWidth] = useState();
    const [color, setColor] = useState("");


    const handleChange = (event) => {
        const {value, name } = event.target;
        let change = name === "height" ? setHeight(value) : name === "width" ? setWidth(value) : 
       setColor(value);
    };
 
     const handleSubmit = (event) => {
        event.preventDefault();
        props.createBox(height, width, color);
     };

    return (
      <form onSubmit={handleSubmit}>
          <div>
              <label htmlFor="height">Height</label>
              <input name="height" id="height"type="text" onChange={handleChange} value= 
              {height}>
              </input>
              <label htmlFor="width">Width</label>

              <input name="width" id="width" type="text"onChange={handleChange} value={width}>
              </input>
              <label htmlFor="color">Color</label>
              <input name="color" id="color"type="text" onChange={handleChange} value={color}>
              </input>
          </div>
            <button>Submit</button>
      </form>
    );
};

---

在handleSubmit调用中发送三个单独的变量，而不是一个对象

const handleSubmit = (event) => {
    event.preventDefault();
    props.createBox(height, width, color);
 };

应该是：

const handleSubmit = (event) => {
    event.preventDefault();
    props.createBox({height, width, color});
 };

---

console.log只记录高度，因为这是您发送的第一个参数。

您在handleSubmit调用中发送了三个单独的变量，而不是一个对象

const handleSubmit = (event) => {
    event.preventDefault();
    props.createBox(height, width, color);
 };

应该是：

const handleSubmit = (event) => {
    event.preventDefault();
    props.createBox({height, width, color});
 };

---

console.log只记录高度，因为这是您要发送的第一个参数。

在函数

create

中只需要一个参数。高度、宽度和颜色是否应作为对象发送到

handleSubmit

？例如，

props.createBox（{高度、宽度、颜色}）而不是
props.createBox（高度、宽度、颜色）好的，我会试试，我需要三个参数。在函数
create
中只需要一个参数。高度、宽度和颜色是否应作为对象发送到
handleSubmit
？例如，
props.createBox（{高度、宽度、颜色}）而不是
props.createBox（高度、宽度、颜色）好的，我会试试看，我期望有三个参数。使用ES6，你不必重复对象名：值来构造一个对象当有完全相同名称的变量时，你可以像
{height，width，color}那样直接传递它们
。使用ES6，您不必重复对象名称：当存在名称完全相同的变量时，您可以像
{height，width，color}
那样直接传递这些值来构造对象。