React Form value not updating when toggling InputMask mask - reactjs

Question

I have a input field that I apply a mask to using react-input-mask. I want to change the mask depending on a dropdown value. What is happening is when I change the dropdown value the new mask is applied on the UI but the form value does not get modified. So, when I submit the form the old mask is used. If I modify the value manually in the textbox then the form value change takes affect.
Here is an simplified example:
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);
If the numbers 123-45-6789 are enter into the text box with the dropdown selection of "one" then this.props.form.getFieldValue("note") returns 123-45-6789. When I change the dropdown to "two" I would expect this.props.form.getFieldValue("note") to return 12-3456789 but the value remains 123-45-6789 even though the text has changed to the new mask. What am I not understanding?

Answer 1

You need to use ref to access the input masked value, then you need to update the Form.Item using setFieldsValue i.e. 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>
);
}
}