React использует другое значение поля ввода, чем показано
Я использую интернационализацию числового формата для поля ввода. например, мое поле ввода будет принимать входные значения как 12,555,8, но когда я отправляю форму, я хочу использовать значение 12555,8 без запятой.
Я использую библиотечный формат response-number, который заботится об обоих форматах. Мой вопрос: как я могу добавить номер 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
Вы читали документы? Я думаю, что это так, примеры есть.
Добавлен фрагмент кода, который я пробовал
Разве вам не стоит делать setState(floatValue)?
Я хочу отображать форматированное значение как значение в поле ввода, но при использовании в коде мне нужен простой номер
Ответы 2
I am using library react-number-format which is taking care of both the formats. My question is how can I attach the 12555.8 number without comma to input field so that when I submit form, I can use that value?
Вы НЕ хотите добавлять значение 12555.8 без запятой в поле ввода. Каждый раз, когда вы изменяете «значение» поля ввода, вы будете изменять то, что отображается для пользователя.
Вместо этого решение состоит в том, чтобы выполнять все изменения данных вне формы, прямо перед ее отправкой.
Итак, в вашей форме вам понадобится обработчик onSubmit, а в вашем компоненте реакции вы определите:
onSubmitHandler = (formData) => {
let cleanFormData = {...formData}
cleanFormData.myNumberInput = cleaningFunction(cleanFormData.myNumberInput)
//submit cleanFormData to server
}
Я добавил свойство как элемент data-valOriginal для React. После этого мы можем получить доступ к этому значению как element.dataset.valOriginal во время события формы отправки.
Не могли бы вы показать свой код и то, что вы пробовали до сих пор?