Reactjs 如何根据数据库中的值设置单选按钮选中 react

export default function updateRadioSelection(){
  const [radioValue, setRadiovalue] = useState("");

  useState(()=>{
    setRadiovalue("pick");    // <-- Assume this value is taken from database, value may be either "delivery" or "pick"
  }, [])

  const changeSelection = (e)=>{
    setRadiovalue(e.target.value);
  }

  return(
    <div>
      <input type="radio" id="delivery" name="orderType" value="delivery" required onChange={changeSelection} />
      <label htmlFor="delivery">Delivery</label>
      
      <input type="radio" id="pick" name="orderType" value="pick" onChange={changeSelection} />
      <label htmlFor="pick">Pick Up</label>
    </div>
  )
}

export default function updateRadioSelection(){
  const [radioValue, setRadiovalue] = useState("");

  // useState will not execute any kind of callback function, for this case you need to use useEffect
  useEffect(() => {
    const dbResult = getRadioFromDb();
    setRadiovalue(dbResult);
  }, [])

  const changeSelection = (e)=>{
    setRadiovalue(e.target.value);
  }

  return(
    <div>
      <input type="radio" id="delivery" name="orderType" value="delivery" required onChange={changeSelection} checked={radioValue === 'delivery'} />
      <label htmlFor="delivery">Delivery</label>
      
      <input type="radio" id="pick" name="orderType" value="pick" onChange={changeSelection} checked={radioValue === 'pick'} />
      <label htmlFor="pick">Pick Up</label>
    </div>
  )
}

Reactjs相关问答推荐

无法在列表中看到文本

react 表复选框不对任何操作做出react

如何使用Reducer更新全局变量

如何在Reac.js中通过子组件和props 调用父组件函数？

如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

页面永远加载API/从数据库获取数据

如何获取用户在 GooglePlacesAutocomplete 中输入的文本？

如何解决使用react-hook-form和yup动态创建的输入不集中的问题

useRef.current.value 为空值

计数器递增 2 而不是 1

如何在 Next Js 13 App Router 中添加 Favicon 图标？

如何在悬停时更改 MUI 卡内容

使用状态与复选框不同步

Cypress 组件测试不渲染react 组件(但它的内容)

为什么接受 useState 返回的函数的 setter 在使用 React 的单个调用中执行两次？

如何向 surveyjs 调查添加多个结尾？

map 未显示在react 传单中

Cypress ，重试不再附加到 DOM 的元素

如何通过 Material Ui 设计将 Accordion 添加到您的 React 项目中？

仅在重新渲染后设置状态