Question

我尝试使用相同的输入框输入不同的值，因此每次输入值时，我都应该存储该值并显示给用户。<input type="text" onChange={e => this.addPrice('input1', e.target.value)} /> 它将放置在模态中，因此无论何时打开模态弹出窗口，都将输入值

Answer 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}]
  }))
}

如何使用reactjs在同一输入框中存储不同的值？

1 个答案: