Значение React Form не обновляется при переключении маски InputMask

Question

У меня есть поле ввода, к которому я применяю маску для использования response-input-mask. Я хочу изменить маску в зависимости от выпадающего значения. Когда я меняю раскрывающееся значение, новая маска применяется к пользовательскому интерфейсу, но значение формы не изменяется. Итак, когда я отправляю форму, используется старая маска. Если я изменю значение вручную в текстовом поле, то изменение значения формы вступит в силу.

Вот упрощенный пример:

import React from "react";
import ReactDOM from "react-dom";
import InputMask from "react-input-mask";
import "antd/dist/antd.css";
import { Form, Select } from "antd";

const FormItem = Form.Item;

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMaskOne: true };
  }

  onSelectChange = e => {
    if (e === "one") {
      this.setState({ isMaskOne: true });
    } else {
      this.setState({ isMaskOne: false });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <FormItem>
          <Select onChange={this.onSelectChange}>
            <Select.Option value="one" key="one">
              one
            </Select.Option>
            <Select.Option value="two" key="two">
              two
            </Select.Option>
          </Select>
        </FormItem>
        <FormItem>
          {getFieldDecorator("note")(
            <InputMask
              mask={this.state.isMaskOne ? "999-99-9999" : "99-9999999"}
              maskChar=""
            />
          )}
        </FormItem>
        <p>{JSON.stringify(this.props.form.getFieldValue("note"))}</p>
      </Form>
    );
  }
}

const WrappedFormComponent = Form.create()(FormComponent);

const rootElement = document.getElementById("root");
ReactDOM.render(<WrappedFormComponent />, rootElement);

Если числа 123-45-6789 вводятся в текстовое поле с выпадающим списком «один», затем this.props.form.getFieldValue («примечание») возвращает 123-45-6789. Когда я изменю раскрывающийся список на «два», я ожидаю, что this.props.form.getFieldValue («note») вернет 12-3456789, но значение остается 123-45-6789, даже если текст изменился на новую маску. Что я не понимаю?

Answer 1

Вам необходимо использовать ref для доступа к маскируемому значению ввода, затем вам нужно обновить Form.Item, используя setFieldsValue, то есть this.props.form.setFieldsValue({ note: this.myRef.current.value });

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMaskOne: true };
    this.myRef = React.createRef();
  }

  onSelectChange = e => {
    if (e === "one") {
      this.setState({ isMaskOne: true }, () => {
        console.log("ref value:", this.myRef.current.value);
         this.props.form.setFieldsValue({ note: this.myRef.current.value });
      });
    } else {
      this.setState({ isMaskOne: false }, () => {
        console.log("ref value:", this.myRef.current.value);
         this.props.form.setFieldsValue({ note: this.myRef.current.value });
      });
    }
  };

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

    return (
      <Form>
        <FormItem>
          <Select onChange={this.onSelectChange}>
            <Select.Option value="one" key="one">
              one
            </Select.Option>
            <Select.Option value="two" key="two">
              two
            </Select.Option>
          </Select>
        </FormItem>
        <FormItem style={{ marginTop: "100px" }}>
          {getFieldDecorator("note")(
            <InputMask
              mask={this.state.isMaskOne ? "999-99-9999" : "99-9999999"}
              maskChar=""
              ref={this.myRef}
            />
          )}
        </FormItem>
        <p>{JSON.stringify(this.props.form.getFieldValue("note"))}</p>
      </Form>
    );
  }
}