Question

我想使用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>

非常感谢！

Answer 1

TL; DR：：您需要收听onChangeCommitted={handleChange}之类的滑块事件。

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

Answer 2

如果有一个选项可以将图像和滑块组合在一个组件中，则非常简单：

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

<image src{paths[value]} />

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

根据MaterialUI滑块的值更改图像

2 个答案: