在React中更改受控輸入的值

Question

我正在尋找有關React控制/不受控制/可控制輸入的幫助。

這是解釋的圖：

反應滑塊

如您在圖像中看到的，我有兩個組件：

• 滑塊組件：范圍從0到50000的輸入。
• 第二部分是文本輸入。 當前這是只讀的，並顯示滑塊的值。

我想做的事

• 文本輸入當前是受控組件 。 相反，我想這樣做，以便用戶可以在文本框中鍵入內容。 如果添加的文本既是數字又介於0到50,000之間，則滑塊狀態值將更新為鍵入的文本輸入值。

這是我的代碼：

  state = {
    sliderValue: 10000
  }

handleChangeSlider = value => {
    this.setState({
      sliderValue: value
    })
  }


<Slider
min={5000}
max={45000}
step={250}
value={this.state.sliderValue}
onChange={this.handleChangeSlider}
/>

<input
className={amountInput}
value={this.state.sliderValue}
/>

我想到的一種可能的解決方案是，在受控輸入上疊加一個新的“過濾器”輸入。 因此，有兩個輸入，一個顯示滑塊值，另一個輸入新值。

我覺得我在這里缺少什么。

有誰能引導我走上正確的道路？

謝謝，

Answer 1

要使輸入可編輯，請嘗試以下操作：

handleInput = event => {
  this.setState({sliderValue: event.target.value})
} 

<input className={amountInput} value={this.state.sliderValue} onChange={this.handleInput}/>

並且不要忘記在構造函數中綁定handleInput。

如果這段代碼有什么問題，請隨時發表評論。