React JS範圍滑塊 - 使用數組作爲值？

我想知道如何使用React中的input[type="range"]獲得數組中索引的值，類似於this example？React JS範圍滑塊 - 使用數組作爲值？

我想要做的是這樣的：傳遞一個值的範圍，並能夠通過使用數組的索引打印出這些值。你可以從下面的示例代碼中看到，我最初呈現的是我想要的值（在本例中爲'Apples'），但是當我使用幻燈片時，它開始呈現數組的索引，而不是的價值。

這裏是我到目前爲止有：

class RangeSlider extends React.Component { 
    // constructor 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: props.value[0] 
    }; 
    } 

    handleChange(event, index) { 
    const { value } = this.state; 
    this.setState({ value: event.target.value}); 
    } 

    render() { 
    const { value } = this.state; 
    const { label } = this.props; 

    return (
     <div className="mb4"> 
     <label className="f4 mt0"> 
      {label} <b className="fw7 pl1">{value}</b> 
     </label> 
     <input 
      className="w-100 appearance-none bg-transparent range-slider-thumb-custom" 
      type="range" 
      min={0} 
      max={this.props.value.length - 1} 
      step={1} 
      value={value} 
      onChange={this.handleChange.bind(this)} 
     /> 
     </div> 
    ); 
    } 

} 

window.onload =() => { 
    ReactDOM.render(
    <RangeSlider 
     label={"I would like some "} 
     value={["Apples", "Oranges", "Pears"]} />, 
    document.getElementById("main")); 
};

鏈接a Codepen。

來源

2017-08-26 A7DC

你的意思是這樣https://codepen.io/maio/pen/qXMVda？ – maioman

@maioman就是這樣，謝謝！ – A7DC

您遇到的唯一問題是在初始加載時，您的狀態對象被設置爲正確訪問數組中的值。但是，每次handleChange方法觸發時，它都會用一個整數覆蓋狀態，因此不會執行您期望的操作。

如果您只是將狀態對象中的「value」屬性設置爲默認值「0」，那麼您可以跟蹤索引，並在代碼中更改一行，它應該可以正常工作。

首先改變你的狀態看起來像這樣：

this.state = { 
    value: 0 
};

接下來，改變這個你JSX體內：

{label} <b className="fw7 pl1">{this.props.value[value]}</b>

這樣，你總是會打印出一個值，而不是屏幕上的整數。我認爲這會導致你不得不添加更少的代碼。

Working Codepen。

來源

2017-08-26 14:29:07

謝謝Daniel。由於代碼的簡單性和詳細的解釋，我已經接受了這個正確答案。這完全有道理，歡呼！ – A7DC

沒問題。愛我一些反應。保持SO = D的問題 –

這裏是更新的代碼

import React from 'react' 

class Range extends React.Component { 
    // constructor 
    constructor(props) { 
    super(props) 
    this.state = { 
     value: 0 
    } 

    this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange(event) { 
    this.setState({ value: this.props.value[event.target.value]}) 
    } 

    render() { 
    const { value } = this.state 
    const { label } = this.props 
    return (
     <div className="mb4"> 
     <label className="f4 mt0"> 
      {label} <b className="fw7 pl1">{value}</b> 
     </label> 
     <input 
      className="w-100 appearance-none bg-transparent range-slider-thumb-custom" 
      type="range" 
      min={0} 
      max={this.props.value.length - 1} 
      step={1} 
      onChange={this.handleChange} 
     /> 
     </div> 
    ) 
    } 

} 

export default Range

來源

2017-08-26 15:20:17

React JS範圍滑塊 - 使用數組作爲值？

回答

相關問題