React表单合理取值方式

React表单完全使用受控组件，即使用value和onChange来控制input状态

<input value={email} onChange={(e) => setEmail(e.target.value)} />

在input输入字符时候，会频繁触发表单重新渲染，因为state改变，react进行了re-render

要避免此种情况，可以使用非受控组件的表单，在组件之间没有实时联动的情况下，非常好用

 <form onSubmit={handleSubmit}>
    <div className="input-field">
        <label htmlFor="email1">Email</label>
        <input id="email1" type="email" name="email" autoComplete="off" />
    </div>
    <div className="input-field">
        <label htmlFor="password1">Password</label>
        <input id="password1" type="password" name="password" />
    </div>
    <button type="submit">Submit</button>
 </form>

function handleSubmit(e) {
    e.preventDefault();

    // e.currentTarget 直接初始化表单
    const form = new FormData(e.currentTarget)

    // form.get 直接获取表单值
    const email = form.get("email");
    const password = form.get("password");
    const gender = form.get("gender");

    //form.set修改对应值
    form.set(password, hash(password)),

    //form.has判断是否有值
    if(formData.has('password')){
        // form.append 添加额外值
        form.append('key', key);
    }

    //form.delete删除指定值
    form.delete('gender', gender),

    // entries遍历表单值
    const body = {};
    for (const [key, value] of form.entries()) {
        body[key] = value;
    }
}

使用FormData的优势

表单输入值会自动捕获，无需为每个输入字段维护状态变量。
使用 FormData 时，API请求体可以很容易地构建，而使用 useState 时，我们需要组装提交的数据。
当表单增长时，它消除了引入新的状态变量的需求。
处理多个表单时，您可能会发现在组件之间重复使用类似的状态变量，而 FormData 只需几行代码就可以轻松重用。
FormData 支持的一项功能是它会自动处理动态字段。即，如果您的表单具有动态生成的字段（根据用户输入添加/删除字段），使用 useState 管理它们的状态需要额外处理，而 FormData 会自动处理这些。

组件需要实时联动，则需要setState刷新视图，需要使用受控组件

待实践后，继续补充

 

参考：在 React 表单开发时，有时没有必要使用State 数据状态