Javascript 状态未在我的REACT组件类中更新

所以我有一系列的组件，一个滑块，3个长、中、短按钮和一个Go！按钮 这是一个屏幕盖，这样你就可以可视化用户界面了

我有一个用于滑块和3个长、短、中按钮的组件类。所有这些都共享状态值。 状态值是滑块上的当前数字，以及一组基于是否选择长/短/中按钮的真/假值

例如，在屏幕截图中，我们可以看到选择了“长”，而选择了“中”和“短”。。。 所以在这个州看起来

Long = true
Medium = false
short = false

因此，限制滑块和3个按钮的状态值被传递到Go！按钮作为道具

我只想在每次单击go按钮时打印出状态

但问题是，当我改变滑块或单击其他按钮时，状态根本不更新，我不明白为什么

下面是为第一个类（滑块和3个按钮）注释的源代码

类用户首选项参数扩展组件{
//包含滑块的当前值和按钮统计信息（为真-假值）的构造函数
构造函数（）{
超级（）；
此.state={
当前值：30，
按钮状态：{long:false，medium:true，short:false}
};
}
//这些是onclick函数，可在单击长-中-短按钮时重置状态
longClicked（）{
这是我的国家({
按钮状态：{
龙：是的，
中等：假，
短：错
}
});
}
中单击（）{
这是我的国家({
按钮状态：{
龙：错，
中：对，
短：错
}
});
}
快捷键（）{
这是我的国家({
按钮状态：{
龙：错，
中等：假，
短：对
}
});
}
//此func获取更改时滑块的当前值
setCurrentValue（新值）{
这是我的国家({
currentValue:新的\u值
});
}
render（）{
函数值文本（值）{
//getValue（value）；
返回`${value}对象`；
}
函数getValue（值）{
返回值；
}
返回(
//返回我的滑块和按钮
极限
this.getCurrentValue（getValue）}
/>
this.longClicked（）}
/>
this.mediumClicked（）}
/>
this.shortClicked（）}
/>
{/*//这里我将状态作为道具传递给按钮*/}
);
}
}

下面是button类的代码

class User_Preference_Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.currentValue,
      button_State: this.props.button_State
    };

  render() {
    return (
      <div className="send_Container">
        <Button
          className="go_Button"
          variant="outlined"
          // here is the onlcikc that is suppost to log the states whcn i click the  Go! button
          onClick={() => {
            console.log(this.state.value, this.state.button_State);
          }}
        >
          Go!
        </Button>
      </div>
    );
  }
}

类用户首选项按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：this.props.currentValue，
按钮状态：此.props.button\u状态
};
render（）{
返回(
{
console.log（this.state.value，this.state.button\u state）；
}}
>
走！
);
}
}

---

我觉得这可能与我如何实例化更新状态的函数有关。。但是我被卡住了，非常感谢对新手的任何帮助

当您设置滑块的新值时，您没有做任何事情来更新按钮的状态标志。虽然您可以在设置新值的地方（在

getCurrentValue

中）修复这个问题，但我根本不会跟踪按钮状态作为它们自己的标志。相反，我会根据滑块的当前值推断状态，并在用户单击按钮时设置滑块值（从而设置按钮状态）

下面是一个简化的示例：

class无线电组件{
render（）{
const{name，label，buttonValue，value，setValue}=this.props；
返回(
设置值（按钮值）}
/>
{label}
);
}
}
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
价值：60
};
this.setValue=this.setValue.bind（this）；
}
设置值（值）{
this.setState（{value}）；
}
render（）{
const{value}=this.state；
返回(
this.setValue（+value）}
/>
);
}
}
render（，document.getElementById（“根”））
当您设置滑块的新值时，您没有做任何事情来更新按钮的状态标志。虽然您可以在设置新值的地方（在
getCurrentValue
中）修复这个问题，但我根本不会跟踪按钮状态作为它们自己的标志。相反，我会根据滑块的当前值推断状态，并在用户单击按钮时设置滑块值（从而设置按钮状态）

下面是一个简化的示例：


class无线电组件{
render（）{
const{name，label，buttonValue，value，setValue}=this.props；
返回(
设置值（按钮值）}
/>
{label}
);
}
}
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
价值：60
};
this.setValue=this.setValue.bind（this）；
}
设置值（值）{
this.setState（{value}）；
}
render（）{
const{value}=this.state；
返回(
this.setValue（+value）}
/>
);
}
}
render（，document.getElementById（“根”））

FWIW，
getCurrentValue
class User_Preference_Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.currentValue,
      button_State: this.props.button_State
    };

  render() {
    return (
      <div className="send_Container">
        <Button
          className="go_Button"
          variant="outlined"
          // here is the onlcikc that is suppost to log the states whcn i click the  Go! button
          onClick={() => {
            console.log(this.state.value, this.state.button_State);
          }}
        >
          Go!
        </Button>
      </div>
    );
  }
}