首页 > 解决方案 > 如何用打字稿解决reactjs中的这个多重选择不起作用

问题描述

我无法多次选择有一个连接错误代码“属性'连接'不存在类型'未知'。” 这是 .tsx 文件

   const DropdownMultiselect =()=>{
        return(
            <>
            <FormControl>
                <Select
                labelId="demo-mutiple-checkbox-label"
                id="demo-mutiple-checkbox"
                multiple
                value={personName}
                onChange={handleChangeMulti}
                input={<Input />}
                placeholder="Enter the Scene"
                renderValue={(selected) => selected.join(',')}
                >
                    {load? <Loader/> :<div className="custom-schedule-dropdown">
                      {sceneResponce.map((scene, index) => 
                      (
                    <MenuItem key={index} value={scene.scene_title}>
                    <Checkbox checked={personName.indexOf(scene.set) > -1} />
                    <div className='image-background'>
                     <img src={schendileIcon.default} className="schedule-icon" />
                     </div>
                    <div>
                     <div className='schedule-scene'>{scene.scene_title+' '+ '|'}{' 
                       '+scene.environment+' '+ '-'}{' '+scene.set}</div>
                     <div className='schedule-location'>{scene.description}</div> 
                     </div>
                    </MenuItem>
                     )
                )}
                </div>}    
                </Select>
      </FormControl>
            </>
        )
    }

屏幕输出:

在此处输入图像描述

当我选择它没有选择并且它也没有显示 在此处输入图像描述

标签: reactjstypescriptmaterial-uireact-typescript

解决方案


unknown实际上似乎是 Material UI 类型中的一个错误。该Select组件应该能够value根据您提供的道具推断类型。此问题已得到修复,但在 v5 发布之前不会包含此修复程序。

您需要将类型设置selectedany。将其设置为更准确的类型,例如string[]由于unknown组件类型中的

renderValue={(selected: any) => selected.join(',')}

看起来你的组件中有很多未定义的变量应该作为道具传递。


推荐阅读