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范围滑块 - 使用数组作为值？

回答

相关问题