reactjs - Redux-Form 分离自定义组件中的显示值和提交值

Question

我有一个自定义组件CurrencyBox，我使用redux-form来提交和验证表单。它非常适合“123,345”、“1.000.000”或“9.000,123”等输入。

今天，我需要将输入值 (1.000.000,456) 作为 (1000000,456) 发送到服务器。

简而言之，显示的值必须类似于 123.456,789，但提交的值必须为 123456,789

有办法解决这个问题吗？

我检查了标准化器等，但这些对我来说不是可行的解决方案。我只是想将显示值和提交值分开。

问候。

Answer 1

您需要为输入组件创建一个包装组件，例如 TextField，该组件应该接收掩码和实际值，您需要为 onChange 设置一些处理程序，onFocus 以及您需要的任何其他回调，例如:

const { string, func } = PropTypes;

class TextField extends Component {
  static propTypes = {
    value: string,
    onChange: func,
    format: string,
  };

  getFormat(value) {
    // set the format that you need
    // based on the format prop or any other option
    return applyFormat(value);
  }

  handleChange = (event) => {
    const value = event.target.value;
    const { onChange } = this.props;

    if (onChange) {
      // Before returning the value
      // you need to remove the format
      onChange(removeFormat(value));
    }
  }

  render() {
    const { value } = this.props;

    return (
      <input
        type="text"
        value={this.getFormat(value)}
        onChange={this.handleChange}
      />
    );
  }
}

这是一个非常简单的示例，说明您可以做什么，基本上在渲染值之前设置格式，并且在 onChange 上您需要删除格式，您可以实现 onBlur 而不是 onChange，这样，如果您使用 redux，数据将被发送到您的化简器，直到用户完成编辑，从而防止在每次击键时调用化简器。

用法:

<TextField
 value={this.props.dataFromRedux}
 onChange={this.props.actionCreatorToSaveValueOnState}
/>

希望这会有所帮助!