Javascript 获取两个组件的状态，并将它们作为参数传递到单独的组件中

我有3个React组件：一个是滑块，另一个是一系列3个按钮（“短”、“中”和“长”），最后一个组件是GO！按钮我单独声明了这3个组件

其思想是滑块包含一个状态值，该值是一个数字，而包含3个按钮的组件的状态是一组真/假值。例如，假设选择了“长”按钮，但未选择“短”和“中”按钮，则组件的状态为“长=真”，而“中”和“短=假”

现在开始吧！按钮，所以这个按钮需要能够以某种方式接受其他2个组件的状态，因为我需要其他组件的状态来“onlick”按钮

// the parent component
class User_Preference_Nav extends Component{

  render(){

    return(

      <div id="user-pref-main">
        <div class="inner-main">
          <User_Preference_Slider />
          <User_Preference_Timeform />

        </div>
        <User_Preference_Button/>

      </div>

    )
  }
}

export default User_Preference_Nav

// the slider component with the state being the set value of the slider
class User_Preference_Slider extends Component{
  constructor() {
    super()
    this.state = {
      currentValue:30
    }
  }

  getCurrentValue(new_Value) {
    this.setState({
      currentValue: new_Value
    })
  }

    render(){

        function valuetext(value) {
          // getValue(value);
            return `${value}objects`;
            
          }

        function getValue(value) {
            return value;
        }




    
    return(
      <div className="slider">
          <Typography id="discrete-slider" gutterBottom>
            Limit
          </Typography>
          <Slider
            defaultValue={30}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider"
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={50}
            onChange={() => this.getCurrentValue(getValue)}
        />
      </div>

    )
    }
}

// the button that i need the states of the other 2 components passing into
class User_Preference_Button extends Component {

    render() {

    return(
      <div className="send_Container">
        <Button className="go_Button" variant="outlined">
          Go!
        </Button>
      </div>

    )
    }
}

// the timeform which is the 3 buttons long, meduim and short, states change on selection of each
class User_Preference_Timeform extends Component {

    constructor() {
      super()
      this.state = {
        long:false,
        medium:true,
        short:false

      }
    }

    longClicked() {
      this.setState({
        long:true,
        medium:false,
        short:false
      })
    }

    mediumClicked() {
      this.setState({
        long:false,
        medium:true,
        short:false
      })
    }

    shortClicked() {
      this.setState({
        long:false,
        medium:false,
        short:true
      })
    }

    render() {



        return(

      <div className="timeForm">
        <FormControl component="fieldset">
          <RadioGroup
            row
            aria-label="position"
            name="position"
            defaultValue="top"
          >
            <FormControlLabel
              value="top"
              control={<Radio color="primary" />}
              label="Long"
              labelPlacement="top"
              onClick={() => this.longClicked()}
            />
            <FormControlLabel
              value="start"
              control={<Radio color="primary" />}
              label="Medium"
              labelPlacement="top"
              onClick={() => this.mediumClicked()}
            />
            <FormControlLabel
              value="bottom"
              control={<Radio color="primary" />}
              label="Short"
              labelPlacement="top"
              onClick={() => this.shortClicked()}
            />
          </RadioGroup>
        </FormControl>
      </div>


        )
    }

}

//父组件
类用户首选项导航扩展组件{
render（）{
返回(
)
}
}
导出默认用户首选项导航
//状态为滑块设定值的滑块组件
类用户首选项滑块扩展组件{
构造函数（）{
超级（）
此.state={
当前值：30
}
}
getCurrentValue（新值）{
这是我的国家({
currentValue:新的\u值
})
}
render（）{
函数值文本（值）{
//getValue（value）；
返回`${value}对象`；
}
函数getValue（值）{
返回值；
}
返回(
极限
this.getCurrentValue（getValue）}
/>
)
}
}
//按钮，我需要其他2个组件的状态传递到
类用户首选项按钮扩展组件{
render（）{
返回(
走！
)
}
}
//3个按钮长、中、短的时间形式在选择每个按钮时会发生变化
类用户\首选项\时间格式扩展组件{
构造函数（）{
超级（）
此.state={
龙：错，
中：对，
短：错
}
}
longClicked（）{
这是我的国家({
龙：是的，
中等：假，
短：错
})
}
中单击（）{
这是我的国家({
龙：错，
中：对，
短：错
})
}
快捷键（）{
这是我的国家({
龙：错，
中等：假，
短：对
})
}
render（）{
返回(
this.longClicked（）}
/>
this.mediumClicked（）}
/>
this.shortClicked（）}
/>
)
}
}

我只是想知道这在React中是否可能，如果可能的话，我将如何构造类，以便将两个组件的状态传递到go button组件中？

将状态提升到父组件中：。