如何使用React Hooks根据range输入框的值从数组中获取对应数值

你只需要在滑块变化的事件回调中，拿到当前滑块对应的range值，从预设数组中匹配到对应的数据项后更新state即可。整个过程不会违反Hook的使用规则，因为useState本身是在组件顶层调用的，条件判断仅用于事件回调内的状态更新逻辑，完全合规。

完整代码实现 #

import { useState } from 'react';

// 预设的range和number映射数组
const arr = [{range:1, number:10},{range:2, number:50}, {range:3, number:100}];

function YourComponent() {
  // 初始化默认值为数组第三项
  const [value, setValue] = useState(arr[2]);

  function handleChangeValue(e) {
    // 把滑块返回的字符串值转为数字，和数组内range字段的类型匹配
    const currentRange = Number(e.target.value);
    // 匹配数组中对应的配置项
    const targetItem = arr.find(item => item.range === currentRange);
    // 匹配到有效项后更新状态
    if (targetItem) {
      setValue(targetItem);
    }
  }

  return (
    <div>
      <Input
        value={value.range}
        onChange={handleChangeValue}
        type="range"
        min="1"
        max="3"
      />
      <h1>{value.number}</h1>
    </div>
  )
}

补充说明 #

如果你的数组内range字段是从1开始连续递增的，也可以直接用索引取值，性能比find遍历更高：

const targetItem = arr[currentRange - 1]

内容的提问来源于stack exchange，提问作者Izabela Górska