React Form value not updating when toggling InputMask mask

akonie

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?

blueseal

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>
    );
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Dropdown and value not updating in Formik + React Form

Toggling checkboxes in React

Toggling React State

React (Reakit): How to ask for confirmation, when toggling a checkbox?

Using react input mask (InputMask) with formik

React Form not updating state onChange

onChange the textbox value is not updating in HTML form using React

Toggling value inside React component with useState not working

Mask Value in Form Data when using browser dev tools

Value not updating when form submitted(PHP, beginner level)

How to remove inputmask when an ajax form is submitted as FromData?

Angular JS Form Values reset when toggling between two elements

Updating the render form a function in React

React Native ios Switch in FlatList not toggling after value changed

React with Semantic TextArea not updating value when props updated

Updating a value inside an array state through toggling a Switch Component on React Native

React-Final-Form Validating Ranges while toggling Required

Updating displayed value with React

How can I keep selected the previous value when updating a form?

v-if not updating in vue from radiobuttons toggling value

Submit the value without the mask in PrimeFaces <p:inputMask> component

ClassList not Toggling in REACT

Angular custom form control not updating form value

Angular form mode toggling

React Hook Form Not Updating Value If Default Values Is Array

State value not updating on form validation

React Updating Form Data

Toggling the visibility of React components

MUI - React Custom Input not updating when setting value with

TOP Ranking

HotTag

Archive