0

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

这些条目没有嵌套在“象限”对象中，但条目以相应表单元素的名称出现在有效负载中（如象限一、象限二……）。

我在这里做错了什么，我该如何解决这个问题？

4

2 回答 2

0

你得到[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>
)
于 2020-12-10T12:36:00.243 回答
0

试试这个修复：-

  • 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
    }
  });
};
于 2020-12-09T16:57:58.047 回答