reactjs 如何使用数组析构设置 prop 的复选框

jgzswidk 于 2023-01-08 发布在 React

关注(0)|答案(3)|浏览(136)

有一个带有用户列表的React MUI数据网格，当单击用户行时，会打开另一个对话框窗口，显示用户的个人详细信息。我使用props将值从数据网格发送到对话框。
有2个复选框字段（查看用户是否具有从后端加载的Android或iOS设备登录权限），如下所述

// Component
    const UserDialogData = (props) =>{
    
     const [platform, setPlatform] = useState({
        Android: false,
        Ios: false,
      });
    
    
      const { Android, Ios } = platform;
    
     useEffect(() => {    

        
          // How to set the props.IsAndroid and props.isIos to be set sothat variables 'Android' and 'Ios' are set to the checbox
        
       
      });

return(<>
 <FormGroup row>
            <FormControlLabel
              control={
                <Checkbox                     
                  size="small"
                  checked={Android}
                  onChange={handleChange}
                  name="Android"
                />
              }
              label="Android"
            />
            <FormControlLabel
              control={
                <Checkbox                     
                  size="small"
                  checked={Ios}
                  onChange={handleChange}
                  name="Ios"
                />
              }
              label="iOS"
            />
          </FormGroup>
</>);

}

现在我想设置useEffect来设置setPlatform的布尔值，有人能帮忙吗？
我是React的新手，无法找到它。

reactjs

来源：https://stackoverflow.com/questions/75046214/react-how-to-set-a-checkbox-from-props-using-array-destructring

3条答案

按热度按时间

ikfrs5lh1#

这里你甚至不需要useEffect。只需要将props值设置为两种不同的布尔状态并相应地使用它们。尝试如下：

const UserDialogData = (props) => {
 const [isAndroid, setIsAndroid] = useState(props.isAndroid);
 const [isIos, setIsIos] = useState(props.isIos);

 return (
  <>
   <FormGroup row>
    <FormControlLabel
     control={
      <Checkbox
       size="small"
       checked={isAndroid}
       onChange={() => {
        setIsAndroid(!isAndroid)
       }}
       name="Android"
      />
     }
     label="Android"
    />
    <FormControlLabel
     control={
      <Checkbox
       size="small"
       checked={isIos}
       onChange={() => {
        setIsIos(!isIos)
       }}
       name="Ios"
      />
     }
     label="iOS"
    />
   </FormGroup>
  </>
 );
};

赞(0）回复(0）举报 2023-01-08

pkln4tw62#

我试过了，不知何故我自己找到了答案。我留下这个帖子是为了让任何像我一样挣扎的人都能利用它。

const UserDialogData = (props) =>{
    
     const [platform, setPlatform] = useState({
        Android: false,
        Ios: false,
      });
    
    
      const { Android, Ios } = platform;

     

   useEffect(() => {
   
      setPlatform({
        ...platform,
        Android: props.isAndroid,
        Ios: props.isIos,
      });
    
  });

}

赞(0）回复(0）举报 2023-01-08

polhcujo3#

我想对您的答案做一个小的编辑，最好从州政府获取旧的PlatformData，因此不要这样做

useEffect(() => {
      setPlatform({
        ...platform,
        Android: props.isAndroid,
        Ios: props.isIos,
      }); 
  });

用这个

useEffect(() => {
      setPlatform((prevSate) =>({
        ...prevSate,
        Android: props.isAndroid,
        Ios: props.isIos,
      }))
     });

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 如何使用数组析构设置 prop 的复选框

3条答案

相关问题

热门标签

最新问答