javascript - 如何设置特定滑块的状态？

Question

我试图在 onChange 事件期间设置特定滑块的值。但是，这会导致在所有滑块上设置值。我想知道如何在 onChange 事件期间设置特定滑块的状态。

这是我迄今为止尝试过的（CodeSandbox）

class SimpleSlider extends React.Component {
  state = {
    value: 50
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <Typography id="label">Slider label</Typography>
        <Slider
          id="slider1"
          value={value}
          aria-labelledby="label"
          onChange={this.handleChange}
        />
        <Slider
          id="slider2"
          value={value}
          aria-labelledby="label"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

标签： javascriptreactjsmaterial-ui

Answer 1

您可以将数组保持在每个元素都是滑块的值的状态，然后将带有值的索引传递给onChange处理程序以更新正确的值。

例子

class SimpleSlider extends React.Component {
  state = {
    sliders: [50, 50]
  };

  handleChange = (index, value) => {
    this.setState(previousState => {
      const sliders = [...previousState.sliders];
      sliders[index] = value;
      return { sliders };
    });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <Typography id="label">Slider label</Typography>
        {this.state.sliders.map((slider, index) => (
          <Slider
            key={index}
            value={slider}
            aria-labelledby="label"
            onChange={(event, value) => this.handleChange(index, value)}
          />
        ))}
      </div>
    );
  }
}