在Antd-Form 表单组件使用getValueFromEvent属性为当前表单域赋值

最新推荐文章于 2024-03-01 10:48:50 发布

weixin_34228617

最新推荐文章于 2024-03-01 10:48:50 发布

阅读量1.6w

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5adc1a5df265da0b9b06e815

在处理Ant Design Form表单组件时，遇到在onChange事件中无法通过setFields重置当前表单域值的问题。原因在于异步赋值会覆盖setState中的值。解决方案是使用getValueFromEvent选项，它能更优雅地更新表单域且避免二次渲染，特别适合自定义InputGroup等特殊情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前项目中对表单的使用较多，最近遇到了一个问题，大致描述：在表单域的onChange组件中无法使用setFields重置当前表单域的值.

发现问题：

class App extends React.Component {
  handleChange = e => {
    const val = e.target.value.toUpperCase();
    this.props.form.setFieldsValue({
      userName: val
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Item
          labelCol={
   
   { span: 5 }}
          wrapperCol={
   
   { span: 12 }}
          label="前缀"
        >
          {getFieldDecorator("userName")(
            <Input onChange={this.handleChange}