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

【问题标题】：How to deal with optional field input in React controlled forms如何处理 React 控制表单中的可选字段输入
【发布时间】：2021-04-02 18:26:10
【问题描述】：

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

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

但我想得到类似的东西

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

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

【问题讨论】：

标签： reactjs react-native react-redux react-hooks

【解决方案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,
        }));
    }
};

【讨论】：