为了账号安全,请及时绑定邮箱和手机立即绑定

材质 ui 单选按钮选择 reactjs 中的上一个按钮值

材质 ui 单选按钮选择 reactjs 中的上一个按钮值

呼如林 2022-09-23 21:51:30

我已经添加了单选按钮组到mareferjs应用程序,这里的问题是当我尝试记录值时,我得到前一个单选按钮的值,而不是获取当前按钮的值。例如。假设当我点击从然后这个日志。我不知道是什么导致了这个问题。allawaitedall


我的代码


 const [radioValue, setRadioValue] = React.useState("all");


function handleChangeRadio(event) {


    const value = event.target.value;

    setRadioValue(value);

    console.log(radioValue);             <---- Here When i try to log the value. it shows the value of previous button.


  }



<RadioGroup

              className={classes.radioGroup}

              aria-label="status"

              name="status"

              value={radioValue}

              onChange={handleChangeRadio}

              row

            >

              <FormControlLabel

                checked={radioValue === "all"}

                value="all"

                control={<Radio color="primary" />}

                label="All"

                labelPlacement="end"

                className={classes.radioLabel}

              />

              <FormControlLabel

                checked={radioValue === "approved"}

                value="approved"

                control={<Radio color="primary" />}

                label="Approved"

                labelPlacement="end"

                className={classes.radioLabel}

              />

              <FormControlLabel

                checked={radioValue === "awaited"}

                value="awaited"

                control={<Radio color="primary" />}

                label="Awaited"

                labelPlacement="end"

                className={classes.radioLabel}

              />

              <FormControlLabel

                checked={radioValue === "on_hold"}

                value="on_hold"

                control={<Radio color="primary" />}

                label="On Hold"

                labelPlacement="end"

                className={classes.radioLabel}

              />

            </RadioGroup>


查看完整描述

2 回答

?
狐的传说

TA贡献1471条经验 获得超3个赞

使用 useState 挂钩提供的更新程序的状态更新是异步的,不会立即反映。


尝试使用钩子读取值:useEffect()


useEffect(() => {

  console.log(radioValue)

}, [radioValue])


查看完整回答
反对 回复 2022-09-23
?
吃鸡游戏

TA贡献1493条经验 获得超7个赞

您需要知道:


setState操作是异步的,并且为提高性能而进行批处理。这在设置状态的文档中有解释。


但是为什么? 改变状态并导致重新呈现。这可能是一项代价高昂的操作,使其同步可能会使浏览器无响应setState


因此,setState 调用是异步的,并且是批处理的,以获得更好的 UI 体验和性能。


如果我需要在之后做些什么怎么办?setState


如果你有一个,你可以做你需要的里面,像这样:React Class ComponentsetState callback


this.setState(newState, function(){

   // Do what it needs to be done after updating newState here

});

如果你有一个你需要用钩子听,并做你需要的事情,像这样:React Functional Componentstate changeuseEffectuseEffect


useEffect(() => {

  // Do what it needs to be done after updating state here

}, [radioValue])


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信