切换输入掩码时反应表单值不更新 [英] React Form value not updating when toggling InputMask mask

问题描述

我有一个输入字段，我使用反应输入掩码对其应用了掩码。我想根据下拉值更改蒙版。发生的情况是，当我更改下拉值时，新的掩码将应用到UI上，但表单值不会被修改。因此，当我提交表单时，使用的是旧的掩码。如果我在文本框中手动修改该值，则表单值更改将生效。

这里有一个简化的例子：

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，并且下拉选择为"1"，则this.pros.form.getFieldValue("note")返回123-45-6789。当我将下拉列表更改为"Two"时，我预计this.pros.form.getFieldValue("note")将返回12-3456789，但即使文本已更改为新掩码，该值仍保持为123-45-6789。我有什么不明白的吗？

推荐答案

需要使用ref访问输入屏蔽值，则需要使用setFieldsValue即this.props.form.setFieldsValue({ note: this.myRef.current.value });

更新Form.Item

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

这篇关于切换输入掩码时反应表单值不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！