根据 MaterialUI 滑块的值更改图像答案

【问题标题】：Change image according to value of MaterialUI slider根据 MaterialUI 滑块的值更改图像
【发布时间】：2020-09-09 20:57:08
【问题描述】：

我想使用discrete Slider component from Material UI 来更改 React Web 应用程序中的图片：每次用户更改滑块上的值时，应在指定的 div 中显示不同的图片。我该怎么做？我想这是从在 Slider 组件中的 onChange 中调用 handleChange 函数开始的，但是我该如何前进呢？

const {Slider, Typography} =  MaterialUI

function App() {
  const [value, setValue] = React.useState([20, 30])
  const handleChange = (event, newValue) => {
        setValue(newValue);
  }
  return (
    <form>

      <Slider
        defaultValue={30}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="auto"
        step={10}
        marks
        min={10}
        max={100}
      />
      
      <Typography>state value: {JSON.stringify(value)} </Typography>

    </form>
  )
}
    
    
// boilerplate to init the app    
ReactDOM.render(<App/>, document.getElementById('main'))

#main { margin-top: 15% }

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

<main id="main"></main>

非常感谢！

【问题讨论】：

看看这个nearby example，看看如何将两件事联系在一起。您可以只使用value 而不是使用defaultValue，并且在初始化状态时设置默认值（您将它作为一个数组，它应该只是一个数字）。

标签： javascript reactjs material-ui

【解决方案1】：

TL;DR：你需要监听像onChangeCommitted={handleChange}这样的滑块事件。

NL;PR：我修改了您的代码，使用滑块更改了幻灯片事件 here 上的 URL 文本。您必须让您的 Slider 受控（状态由外部管理：const [value, setValue] = React.useState(1);）。现在您提供当前值value={value} 并决定何时更新它，就像用户与它交互时onChange={handleChange}（任何幻灯片更改）或onChangeCommitted={handleChange}（仅在用户放开滑块后的最后一次更改）。最后，您可以从newValue 获取用户选择，正如您在此回调中设置的那样：const handleChange = (event, newValue) => { setValue(newValue); };。

【讨论】：

【解决方案2】：

如果有一个选项可以将图像和滑块组合在一个组件中，那就很简单了：

创建一个图像路径数组并仅显示滑块位置路径中的图像

<image src{paths[value]} />

否则，您需要将滑块值保存在两个子组件都可以访问或使用类似Redux的组件中

【讨论】：