反应:捕获未更改的窗体值

在我发现的教程中,捕获表单输入的最佳方法是使用“onchange”处理程序。 但是,我们应该如何处理保留为默认值的字段?

例如,在下面的示例中,如果将“country”保留为默认值,“formData”将永远不会得到它。

const [formData, setFormData] = useReducer(formReducer, {});

const handleChange = event => {
    setFormData({
        name: event.target.name,
        value: event.target.value,
    });
}

const handleSubmit = event => {
    event.preventDefault();
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
    };
    fetch('http://0.0.0.0:8000/add_user/', requestOptions)
}

<form onSubmit={handleSubmit}>
  <fieldset>
    <input type="text" name="name" placeholder="Name" onChange={handleChange} />
    <input type="text" name="country" value="" onChange={handleChange} required />
  </fieldset>
  <Button type="submit">Submit</Button>
</form>

我考虑过一些解决方案,但我认为它们不是最佳实践。例如,添加一段代码,手动将所有默认值分配给构造中的窗体,以便预先填充formData。 有没有一个干净的好方法?