Форма antd setFieldValue для события OnChange не работает

Question

У меня есть простое поле формы, и я пытаюсь отформатировать и установить значение поля, когда событие onChange запускается с помощью setFieldsValue, который не работает.

Я пытаюсь показать отформатированное значение в том же текстовом поле.

Пожалуйста, найдите ссылку на песочницу здесь codeSandbox

Я не хочу создавать еще один контролируемый компонент с состоянием и установите значение, поскольку у меня есть 20 полей в исходных данных формы. Как мы можем установить значение формы на самом onChange.

Answer 1

Вы теряете установленное значение, потому что onChange для форм Antd имеют асин c и запускаются после написанного вами onChange. Чтобы преодолеть это, вы можете просто добавить setTimeout к setFieldsValue:

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

Более прагматичный c способ сделать это - использовать normalize функцию getFieldDecorator:

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

Однако это добавит +1 к каждому изменению, и это не будет похоже на то, что вы хотели бы сделать. Итак, альтернативно:

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

Codesandbox

Answer 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