Question

我正在尝试使用MaterialUI- TextFields建立具有许多不同输入字段的大型表单，该字段必须按特定顺序排列。我制作了一个代表这些字段的对象数组，并根据它们的类型对其进行迭代，以使某些组件不重复20次。之后，我制作了一个包含所有组件的新数组。简化示例：

  const values = [
  {
    inputType: "text",
    label: "Name",
    name: "name"
  },
  {
    inputType: "date",
    label: "Date",
    name: "date"
  }
];

const Index = () => {
  const finalElements = [];
  const initState = {
    name: "",
    date: null
  };
  const [dataState, setDataState] = useState({
    ...initState
  });
  const handleFieldChange = (name, value) => {
    setDataState(() => ({
      ...dataState,
      [name]: value
    }));
  };
  const CustInput = props => {
    const { id } = props;
    return (
      <TextField
        label={id.label}
        name={id.name}
        value={dataState[id.name]}
        onChange={event =>
          handleFieldChange(event.target.name, event.target.value)
        }
      />
    );
  };
  const CustDate = props => {
    const { id } = props;
    return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          label={id.label}
          name={id.name}
          value={dataState[id.name]}
          onChange={date => handleFieldChange(id.name, date)}
        />
      </MuiPickersUtilsProvider>
    );
  };
  Object.entries(values).forEach(([key, value]) => {
    switch (value.inputType) {
      case "text":
        finalElements.push(<CustInput key={value.name} id={value} />);
        break;
      case "date":
        finalElements.push(<CustDate key={value.name} id={value} />);
        break;
      default:
        break;
    }
  });
  const content = <>{finalElements}</>;
  return <Wrapper content={content} />;
};
export default Index;

我的问题是，我似乎无法正确控制状态，因为在某个字段中输入一个字符后，整个表单会重新呈现，并且文本字段变得不集中（我需要再次单击该字段才能输入另一个字符）。您能帮我弄清楚我做错了什么以及如何解决吗？

Answer 1

我希望问题在于您正在Index组件中定义CustInput和CustDate。尝试将那些组件定义移到索引组件之外。

React-具有动态受控元素的表单

1 个答案: