Javascript React JS范围滑块-使用数组作为值？

我想知道如何使用React中的

输入[type=“range”]

获取数组中索引的值，类似于

我试图做的是：传入一系列值，并能够使用数组的索引打印出这些值

正如您将从下面的示例代码中看到的，我最初呈现的是我想要的值（在本例中为“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"));
};

类范围滑块扩展React.Component{
//建造师
建造师（道具）{
超级（道具）；
此.state={
值：道具值[0]
};
}
handleChange（事件、索引）{
const{value}=this.state；
this.setState（{value:event.target.value}）；
}
render（）{
const{value}=this.state；
const{label}=this.props；
返回(
{label}{value}
);
}
}
window.onload=（）=>{
ReactDOM.render(
, 
document.getElementById（“main”）；
};

---

链接到。

您遇到的唯一问题是，在初始加载时，您的状态对象被设置为正确访问数组中的值。但是，每次启动handleChange方法时，它都会用一个整数覆盖状态，因此不会执行预期的操作

如果您只是将state对象中的“value”属性设置为默认值“0”，则只需跟踪索引，并在代码中再更改一行，就可以正常工作

首先将您的状态更改为如下所示：

this.state = {
  value: 0
};

接下来，在jsx正文中更改为：

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

{label}{this.props.value[value]}

这样，您总是要在屏幕上打印一个值，而不是一个整数。我认为这会导致您不得不添加更少的代码

---

.

以下是更新的代码

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

从“React”导入React
类范围扩展了React.Component{
//建造师
建造师（道具）{
超级（道具）
此.state={
数值：0
}
this.handleChange=this.handleChange.bind（this）
}
手变（活动）{
this.setState（{value:this.props.value[event.target.value]}）
}
render（）{
const{value}=this.state
const{label}=this.props
返回(
{label}{value}
)
}
}
导出默认范围

你的意思是这样吗？@maioman就是这样，谢谢！谢谢你，丹尼尔。由于代码的简单性和详细的解释，我认为这是正确的答案。这完全有道理，干杯！没问题。爱我一些。继续提问，所以=D