Question

假设我有一个包含 3 个字段的表单：firstName、middleName、lastName。字段 firstName 和 lastName 是必需的，但 middleName 是可选的。所以，当有人填写表单而不写他的中间名时，表单产生的对象是这样的

{
  firstName: "John",
  middleName: "",
  lastName: "Doe",
}

但我想得到类似的东西

{
  firstName: "John",
  middleName: undefined,
  lastName: "Doe",
}

当然我可以手动清理生成的对象，并将 "" 转换为 undefined，但我想知道是否有更好的方法。

Answer 1

您可以编写自定义逻辑来处理此问题：

const initialValues = {
    firstName: "",
    lastName: "",
    middleName: ""
}
// Set use state
const [values, setValues] = useState(initialValues);

const handleMiddleNameInputChange = (event) => {
    event.persist();
    if(middleName === ""){
        setValue((values)=>({
            ...values,
            middleName: "undefined"
        }));
    }else{
        setValues((values) => ({
            ...values,
            middleName: event.target.value,
        }));
    }
};

如何处理 React 控制表单中的可选字段输入

1 个答案: