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>
    );
  }
}

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>
    );
  }
}

Answer 2

在同一个类中定义了两个滑块，这使它们共享所有属性，例如状态变量。如果您移动一个滑块，则另一个滑块将跟随，因为它们共享该属性。

要解决此问题，请创建一个通用幻灯片类，并在该类之外对其进行两次调用。每个都有自己的属性，因此也有自己的onChange事件。

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

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

    render() {
        <Slider
            id={this.props.id}
            value={value}
            aria-labelledby="label"
            onChange={this.handleChange}
        />
    }
}

class SimpleSlider extends React.Component {
  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <Typography id="label">Slider label</Typography>

        <GenericSlider id="slider1"/>
        <GenericSlider id="slider2"/>
      </div>
    );
  }
}

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

2 个答案: