OnChange 事件上的 Antd 表单 setFieldValue 不起作用答案

【问题标题】：Antd form setFieldValue on OnChange event is not workingOnChange 事件上的 Antd 表单 setFieldValue 不起作用
【发布时间】：2020-03-01 03:25:07
【问题描述】：

我有一个简单的表单字段，我尝试在使用不工作的 setFieldsValue 触发 onChange 事件时格式化和设置字段值。

我正在尝试在同一文本字段中显示格式化值。

请在此处找到沙盒链接 codeSandbox

我不想再创建一个带状态的受控组件并设置值，因为我在原始表单数据中有 20 个字段。我们如何在 onChange 本身上设置表单值。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

您正在丢失设置的值，因为 Antd 表单的 onChange 是异步的，并且在您编写的 onChange 之后运行。要克服这个问题，您只需将setTimeout 添加到setFieldsValue：

onChange={e => {
  const value = e.target.value;
  const { setFieldsValue, getFieldValue } = this.props.form;
  setTimeout(() => {
    setFieldsValue({
      drivers: `+1 - ${value}`
    });
  }, 0);
}}

更实用的方法是使用getFieldDecorator的normalize函数：

{getFieldDecorator(`drivers`, {
   initialValue: "",
   normalize: (value) => {
     return `+1 ${value}`;
   }
})}

但是，这会在每次更改时添加+1，这看起来不像您想要做的。所以或者：

normalize: (value) => {
  if(!value.startsWith('+1')) {
    return `+1 ${value}`;
  } 
  return value;
}

Codesandbox

【讨论】：

感谢您的回答，但是我们可以仅在 onBlur 上执行此操作吗，例如：在 onBlur 事件上获取值格式并显示在文本字段中，实际上我想为卡号匹配格式 1234567812345678 或1234-5678-1234-5678。如果我使用 normalize 并这样做，那么正则表达式的 decorateRules 会抛出无效的卡号
@RinsenS 我不明白。你想做吗onBlur？但是你的问题不是onChange吗？

【解决方案2】：

您也可以使用事件更改表单值。

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button } from "antd";
const FormItem = Form.Item;

class Demo extends React.Component {
  changePhone = () => {
    const { setFieldsValue, getFieldValue } = this.props.form;
    let drivers = getFieldValue("drivers");
    console.log("driver data was", drivers);
    setFieldsValue({
      drivers: `1234`
    });
  };

  handlePhoneChange = event => {
    const value = event.target.value;
    const { getFieldValue } = this.props.form;
    let drivers = getFieldValue("drivers");

    // if (!drivers.startsWith("+1 - ") && drivers.length > 3) // Another way
    if (!drivers.startsWith("+1 -"))
      // event.target.value = `+1 - `; // Another way
      event.target.value = `+1 - ${value}`;
    else
      event.target.value = `${value}`;
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form>
          <FormItem
            label="phone"
            style={{
              display: "inline-block"
            }}
          >
            {getFieldDecorator(`drivers`, {
              initialValue: ""
            })(<Input onChange={this.handlePhoneChange} />)}
          </FormItem>
        </Form>
        <Button type="primary" onClick={this.changePhone}>
          change phone
        </Button>
      </div>
    );
  }
}

const Wrapped = Form.create()(Demo);

ReactDOM.render(<Wrapped />, document.getElementById("container"));

https://codesandbox.io/s/clever-hill-vuxtj

【讨论】：