Arco Design表单中输入框的值无法实时更新，如何解决？

首先你要明白这个问题的本质，不是 Arco Design 的 bug，而是你对 React 状态更新机制的理解有偏差。你现在的写法导致了“状态滞后”现象，也就是你看到的 value 永远是上一次渲染的值。

你在 onChange 里调用 setValue(e.target.value)，然后立刻去 console.log(value)，但这个时候 value 还没被更新！因为 React 的 useState 是异步更新的，不会立即生效。这就是为什么你输入 "abc"，log 出来的是 "ab" —— log 的是旧值。

另外你还混用了两种受控方式：既用 useForm 管理表单，又用外部 state 控制 input 值，这容易造成冲突。Arco 的 Form.useForm() 本身就能管理字段值，不需要额外维护一个 value state，除非你真有特殊需求。

正确的做法分两种情况，我给你都列出来：

第一种，如果你只是想做个普通受控输入框，推荐直接用 Form.Item + name 自动绑定，最省事：

const [form] = Form.useForm();



return (

  <AForm form={form}>

    <AForm.Item name="test">

      <a-input placeholder="输入试试" />

    </AForm.Item>

  </AForm>

);

这样 input 的值会自动被 form 管理，提交时通过 form.getFieldsValue() 拿数据，完全实时，不会有延迟。原理是 Arco 内部通过 name 把字段和 form 实例关联起来，每次输入都会触发 form.setFieldValue，同步更新。

第二种，如果你确实需要监听输入过程，比如要做搜索建议、实时校验之类的，那你可以保留外部 state，但不要在 onChange 里直接读这个 state。需要看值的时候，应该读 event.target.value 或者调用 form.getFieldValue('test')。

正确写法如下：

const [form] = Form.useForm();

const [value, setValue] = useState('');



const onChange = (e) => {

  const currentValue = e.target.value; // 当前最新的输入值

  setValue(currentValue); // 更新状态，用于下次渲染



  // 如果你想在这里做点什么，比如发请求、计算长度等

  console.log('当前输入:', currentValue); // 这才是对的

};



return (

  <AForm form={form}>

    <AForm.Item name="test">

      <a-input 

        value={value} 

        onChange={onChange} 

      />

    </AForm.Item>

  </AForm>

);

注意关键点：你在 onChange 回调中，读的是 e.target.value，而不是 state.value。state 只用来控制下一次渲染的初始值。这才是 React 受控组件的标准玩法。

还有一种更简洁的写法，如果你不想管 value state，可以直接让 form 来驱动显示：

const [form] = Form.useForm();



// 想要拿到实时值？用这个

const handleInputChange = () => {

  const currentValues = form.getFieldsValue();

  console.log('当前所有字段:', currentValues);

};



return (

  <AForm form={form}>

    <AForm.Item name="test">

      <a-input 

        onChange={handleInputChange} 

      />

    </AForm.Item>

  </AForm>

);

这样每次输入变化都会触发 handleInputChange，你通过 form.getFieldsValue() 拿到的就是最新值，绝对同步。

总结一下：你的问题出在误以为 setState 后能立刻读到新值。React 的状态更新是异步的、批处理的，不能立即访问。解决方案要么靠事件对象里的值，要么靠 form 实例去取，别依赖刚 set 完的 state。

顺便吐槽一句，这种坑我当年也踩过，打印一堆 log 蒙圈半小时才发现是自己搞错了执行顺序。慢慢来，熟悉了就好了。