React表单文本框设置value="Nombre"后无法输入问题解决

输入框无法输入的问题由两处代码错误共同导致：

• 事件处理函数解构字段错误：DOM事件对象e.target上，对应标签name属性的字段名固定为name，不是你写的Nombre。当前代码解构得到的Nombre永远是undefined，执行setState时根本没有更新对应表单字段的状态值。
• 受控组件value属性写死：React受控组件要求输入框的value必须和组件状态动态绑定，你当前直接给value传了固定字符串"Nombre"，无论触发多少次onChange，输入框的值永远是固定字符串，自然无法输入新内容。

按以下两处修改代码即可解决问题：

1. 修正handleChange函数的解构逻辑，从e.target中取标准name字段而非自定义的Nombre：

const handleChange = (e) => {
  const { name, value } = e.target; 
  setState({ ...state, [name]: value });
};

2. 将Form.Control的value属性改为绑定state中对应的状态值，移除写死的字符串，注意提前在state初始值中声明Nombre字段（比如初始state设为{ Nombre: '' }）：

<Form.Group>
  <Form.Label style={{textAlign:"left"}}>Nombre</Form.Label>
  <Form.Control
    type="text"
    placeholder="Nombre"
    name="Nombre"
    value={state.Nombre}
    onChange={handleChange}
  />
</Form.Group>

修改完成后输入框内容会和state.Nombre双向绑定，输入时会正常触发状态更新、同步显示输入内容。

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