如何将对象设置为表单值以响应 Material UI?

How to set objects as form values in react with Material UI?

我目前正在尝试使用 React 和 Material UI 构建表单,其中我的最终负载必须如下所示:

{
  title: title,
  quadrants: {
    0: { name: quadrantOne },
    1: { name: quadrantTwo },
    2: { name: quadrantThree },
    3: { name: quadrantFour }
  }
}

我的表单对应部分(包括初始值)结构如下:

const initialValues = {
  title: '',
  quadrants: {},
};

const [values, setValues] = useState(initialValues);

const handleInputChange = (e: any) => {
  const { name, value } = e.target;
  setValues({
    ...values,
    [name]: value
  });
};

return (
    <Form>
        <Grid item xs={12} sm={12}>
          <Input
            name="title"
            label="Title"
            value={initialValues.title}
            onChange={handleInputChange}
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <Input
            name="quadrant-one"
            label="Quadrant 1"
            value={initialValues.quadrants}
            onChange={handleInputChange}
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <Input
            name="quadrant-two"
            label="Quadrant 2"
            value={initialValues.quadrants}
            onChange={handleInputChange}
          />
        </Grid>
    </Form>
)

这样一来,我的输入框就变成了这样,所以我无法在这些字段中输入任何内容::

但是如果我在字段中输入内容(条目不可见),那么我会得到以下有效负载:

{
  title: "Test"
  quadrants: {}
  quadrant-one: "[object Object]"
  quadrant-two: "[object Object]"
}

条目未嵌套在“象限”对象中,但条目出现在负载中,并带有相应表单元素的名称(如象限一、象限二..)。

我做错了什么,我该如何解决?

试试这个修复:-

  • input valuevalue={initialValues.title} 更改为 value={values.title}。由于您已经将 initialValues 设置为 state valuesonChange 事件仅在 state values 更新为 setValues 时反映。不直接在 const initialValues 上(对 输入的其余部分执行相同操作 - 仅使用 values state 的输入)

  • functionhandleTitleChange()

const handleTitleChange = (e: any) => {
  const { name, value } = e.target;
  
  setValues({
    ...values,
    [name]: value
  });
};
  • functionhandleQuadrantChange()
const handleQuadrantChange = (e: any) => {
  const { name, value } = e.target;
  
  setValues({
    ...values,
    quadrants: {
      ...values.quadrants,
      [name]: value
    }
  });
};

你得到 [Object Object] 因为 initialValues.quadrants 是一个对象,我假设你正在尝试设置 initialValues.quadrants[0].name,但作为初始值 initialValues.quadrants [0] 未定义

您需要应用一些更改。我建议您为象限输入定义一个自定义属性(数据索引),这样在输入更改时您可以更新正确的对象。同样对于象限输入,您可以定义一个函数来获取值,因为首先渲染它的值是未定义的:

const initialValues = {
    title: "",
    quadrants: {}
  };

  const [values, setValues] = useState(initialValues);

  const handleInputChange = e => {
    const { name, value } = e.target;
    const dataIndex = Number(e.target.getAttribute("data-index"));
    setValues(prev => {
      if (name === "title") {
        return {
          ...prev,
          [name]: value
        };
      } else {
        return {
          ...prev,
          quadrants: {
            ...prev.quadrants,
            [dataIndex]: { name: value }
          }
        };
      }
    });
  };

  const getValue = prop => {
    const value = values.quadrants[prop] ? values.quadrants[prop].name : "";
    return value;
  };

return (
    <Form>
        <Grid item xs={12} sm={12}>
          <Input
            name="title"
            label="Title"
            value={values.title}
            onChange={handleInputChange}
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <Input
            name="quadrant-one"
            label="Quadrant 1"
            data-index="0"
            value={getValue(0)}
            onChange={handleInputChange}
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <Input
            name="quadrant-two"
            label="Quadrant 2"
            data-index="1"
            value={getValue(1)}
            onChange={handleInputChange}
          />
        </Grid>
    </Form>
)