Как я могу хранить разные значения, используя одно и то же поле ввода, используя reactjs?
Я пытаюсь использовать один и тот же поле ввода для ввода разных значений, поэтому каждый раз, когда значения вводятся, я должен сохранять значение и отображать его пользователю .<input type = "text" onChange = {e => this.addPrice('input1', e.target.value)} />
это помещается внутри модального окна, поэтому всякий раз, когда модальное всплывающее окно открыто, используется ввод значения
Пользователь нажимает кнопку (или выполняет другое действие), чтобы сохранить значение? В настоящее время this.addPrice в onChange будет запускаться для каждого символа, добавленного во ввод.
addPrice = (input, value) => {this.setState ({amount: value}) как я могу сохранить другое значение, введенное в один и тот же массив, или как различать значения
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Чтобы использовать одно и то же поле ввода для добавления значений в один массив, скорее всего, потребуется дополнительное действие (например, нажатие кнопки), которое пользователь выполняет, чтобы указать, когда сохранить текущее значение.
state = {
currentValue: '',
prices: [],
}
onChange = (event) => {
this.setState({ currentValue: event.target.value })
}
addPrice = () => {
this.setState(prevState => ({
prices: [...prevState.prices, this.state.currentValue]
}))
}
...
<input type='text' onChange = {this.onChange} value = {this.state.currentValue} />
<button onClick = {this.addPrice}>Add Price</button>
Обновлено: вы можете хранить что угодно в массиве prices. Если вам нужны пары ключ-значение, храните такие объекты, как:
addPrice = () => {
this.setState(prevState => ({
prices: [...prevState.prices, {amount: this.state.currentValue}]
}))
}
тогда при повторном открытии поля ввода будут отображаться предыдущие значения, поскольку мы используем value = {this.state.currentValue}
Вы можете добавить метод очистки currentValue при открытии или закрытии поля ввода.
хорошо сказано, еще один вопрос, могу ли я установить любой ключ для значения при сохранении в массиве, таком как [key: '', value: '']
Вы можете хранить в массиве все, что хотите, но похоже, что вы хотите хранить объекты. Я обновлю ответ, чтобы решить эту проблему.
Можете ли вы добавить еще код, чтобы сделать вопрос более ясным? Прямо сейчас он говорит, что вы используете то же поле ввода. Но нет упоминания о коде, показывающем, где вы его используете.