React 使用与显示不同的输入字段值答案

【问题标题】：React use different value of input field than it is showingReact 使用与显示不同的输入字段值
【发布时间】：2018-06-30 16:36:00
【问题描述】：

我正在为输入字段使用数字格式国际化。例如，我的输入字段将输入值作为 12,555.8，但是当我提交表单时，我想使用不带逗号的值 12555.8。

我正在使用库 react-number-format 来处理这两种格式。我的问题是如何将不带逗号的 12555.8 数字附加到输入字段，以便在提交表单时可以使用该值？

<NumberFormat  
                    thousandSeparator={this.props.thousandSeparator}
                    decimalSeparator={this.props.decimalSeparator}
                    value={this.state.formattedValue}
                    valOriginal={this.modifiedInputValue}
                    onKeyUp={(event) => {this.onKeyUpFormatted(event)}}
                    onValueChange={(values) => {
                        const {formattedValue, floatValue} = values;
                        this.modifiedInputValue = isNaN(floatValue)?'':floatValue;
                        this.setState({formattedValue});
                    }}
                />

我尝试了这段代码，而表单提交尝试捕获非格式化值，如下所示

event.target.elements.valOriginal

【问题讨论】：

您能展示一下您的代码以及到目前为止您尝试过的内容吗？
你读过docs吗？我认为那里有很多例子。
添加了我试过的代码 sn-p
你不应该做setState(floatValue)吗？
我想在输入字段中显示格式化值，但是在代码中使用时，我想要纯数字

标签： html reactjs

【解决方案1】：

我为 React 元素添加了属性作为 data-valOriginal。之后，我们可以在提交表单事件期间将该值作为 element.dataset.valOriginal 访问。

【讨论】：

【解决方案2】：

我正在使用库 react-number-format 来处理这两种格式。我的问题是如何将不带逗号的 12555.8 数字附加到输入字段，以便在提交表单时可以使用该值？

您不想将不带逗号的 12555.8 值附加到输入字段。每当您修改输入字段的“值”时，您将更改为用户显示的内容。

相反，解决方案是在表单提交之前进行所有数据修改。

因此，在您的表单上，您将需要一个“onSubmit”处理程序，并且在您的反应组件中，您将定义：

onSubmitHandler = (formData) => {
  let cleanFormData = {...formData}
  cleanFormData.myNumberInput = cleaningFunction(cleanFormData.myNumberInput)
  //submit cleanFormData to server
}

【讨论】：