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

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

这就是我到目前为止所尝试的（）

类SimpleSlider扩展了React.Component{
状态={
价值：50
};
handleChange=（事件、值）=>{
this.setState（{value}）；
};
render（）{
const{classes}=this.props；
const{value}=this.state；
返回(
滑块标签
);
}
}

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

要解决此问题，请创建一个通用幻灯片类，并在该类之外调用它两次。每个都有自己的属性，因此有自己的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>
    );
  }
}

类GenericSlider扩展React.Component{
状态={
价值：50
};
handleChange=（事件、值）=>{
this.setState（{value}）；
};    
render（）{
}
}
类SimpleSlider扩展了React.Component{
render（）{
const{classes}=this.props；
const{value}=this.state；
返回(
滑块标签
);
}
}

您可以将数组保持为每个元素都是滑块值的状态，然后将带有该值的索引传递给

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

类SimpleSlider扩展了React.Component{
状态={
滑块：[50，50]
};
handleChange=（索引，值）=>{
this.setState（previousState=>{
常量滑块=[…previousState.sliders]；
滑块[索引]=值；
返回{滑块}；
});
};
render（）{
const{classes}=this.props；
const{value}=this.state；
返回(
滑块标签
{this.state.sliders.map（（slider，index）=>(
this.handleChange（索引，值）}
/>
))}
);
}
}

我以前从未使用过reactjs，但这可能是您为两个滑块声明的值吗？所以，当你改变你的想法时，实际上是在更新“value”的值，这会影响到两个滑块。你能有一个动态的滑块吗？或者你想知道如何分别处理这两个特定的滑块吗？@Tholle他们是动态的，这是可能的吗？当有onChange事件时，我们将状态设置为已更改的值。组件使用新值重新渲染，所有子组件将通过道具接收相同的值

并且在

滑块组件中

它将

value=this.props.value

。如果您有一个类来处理滑块，您只需为每个组件实例化一个。这样，每个组件都有自己的属性和事件集，因此您不必担心引用和其他问题。

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