reactjs 在react中更改一个单选按钮的状态后，更改组中的其余单选按钮

h79rfbju 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(149)

我有一组单选按钮。我通过useState管理状态。当用户选择一个单选按钮时，其他单选按钮应该变为false。我正在尝试一个基本的if else来处理这个问题。我觉得我做错了，可以更有效地完成。有没有其他方法可以做到这一点。请帮助。

const [trans,setTrans] = useState({
    expense : false, income : false,
    lend : false}
  );
  const setRadio = (event)=>{

    const buttonName = event.target.id;
    if(buttonName==="expense"){
      setTrans((prev) =>({...prev,[buttonName]:true,income:false,lent:false}));
    }
    if(buttonName==="income"){
      setTrans((prev) =>({...prev,[buttonName]:true,expense:false,lent:false}));
    }
    if(buttonName==="lent"){
      setTrans((prev) =>({...prev,[buttonName]:true,income:false,expense:false}));
    }
  }

reactjs

来源：https://stackoverflow.com/questions/74642269/change-remaining-radio-buttons-in-group-after-changing-state-of-one-radio-button

1条答案

按热度按时间

n53p2ov01#

不需要填充状态。您可以执行以下操作：

// initialState should be outside your component
let initialState = {
  expense: false,
  income: false,
  lend: false,
};

const [trans, setTrans] = useState({
  ...initialState,
});

const setRadio = (event) => {
  const buttonName = event.target.id;
  let changedTrans = {
    ...initialState,
    [buttonName]: true,
  };
  setTrans(changedTrans);
};

参考代码sandbox链接：https://codesandbox.io/s/radio-react-jlxhuf

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 在react中更改一个单选按钮的状态后，更改组中的其余单选按钮

1条答案

相关问题

热门标签

最新问答