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

Question

我目前正在尝试使用 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]"
}

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

我做错了什么，我该如何解决？

Answer 1

试试这个修复：-

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

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

function 到 handleQuadrantChange()

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

Answer 2

你得到 [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>
)

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

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

reactjs

react-redux

material-ui

react-material

react-forms