React表单触发onChange但输入框值未更新，编辑功能异常求助

你的输入框是受控组件，每个输入框的value都绑定了old状态里的对应字段，但changeHandler函数只做了日志打印，完全没调用setOld更新状态——这就是输入框值不变的核心原因。

要解决这个问题，只需要在changeHandler里正确更新状态即可，注意React状态更新的不可变性，不能直接修改原对象，要先拷贝再修改：

修改后的changeHandler代码：

let changeHandler=(event)=>{            
    let {value,name}=event.target;
    // 拷贝旧状态对象，修改对应字段后更新
    setOld(prev => ({
        ...prev,
        [name]: value
    }));
}

完整修改后的组件代码：

import React, { useState } from 'react'
import { Form,Button } from 'react-bootstrap';

const EditData = () => {
   
    let [old,setOld]=useState({
        id:"ab123",bookname:"Book1",author:"John Doe",price:"1,234"
    })   
  
    let changeHandler=(event)=>{            
        let {value,name}=event.target;
        setOld(prev => ({
            ...prev,
            [name]: value
        }));
    }

    let submitHandler=(event)=>{
      event.preventDefault();
      console.log("提交的新数据：", old);
      
    }

  return (
    <div>
          <Form onSubmit={submitHandler}>
          <Form.Group className="mb-3" controlId="booksname">
            <Form.Label>书名</Form.Label>
            <Form.Control type="text"  name="bookname" value={old.bookname} onChange={changeHandler} />
          </Form.Group>

          <Form.Group className="mb-3" controlId="booksauthor">
            <Form.Label>作者</Form.Label>
            <Form.Control type="text" name="author" value={old.author} onChange={changeHandler}/>
          </Form.Group>

          <Form.Group className="mb-3" controlId="booksprice">
            <Form.Label>价格</Form.Label>
            <Form.Control type="text" name="price" value={old.price} onChange={changeHandler}/>
          </Form.Group>

          <Button variant="outline-dark" type="submit">
            提交
          </Button>
        </Form>
    </div>
  )
}

export default EditData

关键说明： #

• 使用函数式更新setOld(prev => ...)是为了确保拿到最新的状态值，避免状态更新滞后的问题
• 通过扩展运算符...prev拷贝旧对象的所有属性，再用[name]: value覆盖对应字段，保证状态更新的不可变性
• 修改后，输入框的每一次变化都会同步更新old状态，输入框的值也会随之变化，最终提交时能拿到最新的编辑数据

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