当输入范围具有特定值时如何使用 React Hooks 从数组中获取值？答案

【问题标题】：How to get value from array when input range has particular value using React Hooks?当输入范围具有特定值时如何使用 React Hooks 从数组中获取值？
【发布时间】：2021-07-08 10:56:53
【问题描述】：

我正在尝试使用 useState 挂钩设置不同的数字并输入“范围”类型。假设我有一个值数组：

const arr = [{range:1, number:10},{range:2, number:50}, {range:3, number:100}]

然后输入：

<Input
  value={value.range}
  onChange={handleChangeValue}
  type="range"
  min="1"
  max="3">
</Input>

当我的滑块有特定范围时，我想显示数字，例如当范围为 2 时，我想要数字 50：

<h1>{value.number}</h1>

如何使用 useState 钩子来做到这一点？因为我知道钩子不能用在 if 语句中。

请指教:)

const [value, setValue] = useState(arr[2])

 function handleChangeValue() {
       
    }

【问题讨论】：

尝试函数handleChangeValue(e) { setValue(arr.find(item => item.range = e.target.value)); }
数字变为 10，然后我无法更改滑块中的范围。

标签： reactjs react-hooks

【解决方案1】：

试试这个：

<Input
  value={value.range}
  onChange={handleChangeValue}
  type="range"
  min="1"
  max="3">
</Input>

const [value, setValue] = useState(arr[2])

function handleChangeValue(e) {
    
    const selected = arr.find((obj) => obj.range === e.target.value)
    selected && setValue(selected)
       
}

【讨论】：

你不需要使用 (e) => handleChangeValue(e)。只需使用 onChange={handleChangeValue}
一些异常处理：selected && setValue(selected)
@TopW3 你是对的。我已经更新了答案
现在我无法更改滑块的范围。它只是不动。
您可以编辑您的问题并提供更多详细信息吗？

【解决方案2】：

自己编写函数:)

这个对我有用：

    function handleChangeValue(e) {
        setValue(arr[e.target.value-1])
    }

【讨论】：