React应用中使用Formik的简单表单无法编辑文本框问题

在React应用中使用Formik处理表单字段变更与提交操作，但纯HTML表单的文本输入框无法输入内容。最初怀疑问题与Redux、Bootstrap、Reactstrap等关联库有关，但简化后的无状态纯表单仍出现同类问题。

简化后的PlainForm组件代码如下：

// React组件
import { useFormik } from 'formik';
import './PlainForm.css';

const PlainForm = () => {
    const formik = useFormik({
        initialValues: {
            name: '',
        },
        onSubmit: values => {
            alert(`纯表单已提交，姓名：${values.name}`);
        },
    });

    return (
        <div className='plain-form-container'>
            <h1>纯表单</h1>
            <form
                className='baseForm'
                onSubmit={formik.handleSubmit}
                noValidate
            >
                <label htmlFor='plain-form-name'>姓名：</label>
                <input
                    type='text'
                    id='plain-form-name'
                    className='nameField'
                    placeholder='请输入您的姓名'
                    value={formik.values.name}
                    onChange={formik.handleChange}
                />
                <button type='submit'>提交</button>
            </form>
        </div>
    );
};

export default PlainForm;

解决方案 #

问题核心是输入框缺少name属性。Formik的handleChange默认通过输入框的name属性匹配initialValues中的字段名，以此更新对应表单状态。当前代码仅设置了id，未设置name，导致Formik无法关联到formik.values.name，输入内容无法同步到表单状态中。

修复方式1：添加name属性 #

给input标签补充name="name"属性即可解决：

<input
    type='text'
    id='plain-form-name'
    name='name' // 新增该行
    className='nameField'
    placeholder='请输入您的姓名'
    value={formik.values.name}
    onChange={formik.handleChange}
/>

修复方式2：手动调用setFieldValue #

如果不想使用name属性，也可以直接调用Formik的setFieldValue方法更新字段：

<input
    type='text'
    id='plain-form-name'
    className='nameField'
    placeholder='请输入您的姓名'
    value={formik.values.name}
    onChange={(e) => formik.setFieldValue('name', e.target.value)}
/>

内容的提问来源于stack exchange，提问作者freenrg