时间戳

首页 > 解决方案 > 如何在 React js 中使用 Material-Ui 中的 multiSelect？

reactjs - 如何在 React js 中使用 Material-Ui 中的 multiSelect？

问题描述

我的项目中的 ui 多选。我正在使用renderValueprop of显示选定的值Select。这是我的代码 -

<Select
      labelId="demo-mutiple-checkbox-label"
      id="demo-mutiple-checkbox"
      multiple
      value={studentList!}
      renderValue={SelectedData(studentList!)}
>
      {studentList && studentList.map((studentListData: any) => (
         <MenuItem key={studentListData.stuId} value={studentListData.studentName!}>
            <Checkbox checked={studentListData.good} />
            <ListItemText primary={studentListData.studentName} />
         </MenuItem>
      ))}
</Select>

和下面的SelectedData功能代码 -

let blankArray = [];
    const Demo = (studentList:any): React.ReactNode => {
        studentList.map((studentName :string) => {
            blankArray.push(studentList.studentName);
        });     
        return blankArray.join(", ");
    }

此 Demo 函数在 renderValue 中不起作用。显示错误 -Type 'ReactNode' is not assignable to type '((value: unknown) => ReactNode) | undefined'. Type 'null' is not assignable to type '((value: unknown) => ReactNode) | undefined'. 但如果我喜欢，renderValue={(selected) => selected.join(', ')}那么它工作正常。我想像上面那样创建单独的 const 方法，不想在里面渲染函数renderValue。有什么办法吗？

标签： reactjsmaterial-ui

解决方案

不想在里面渲染函数renderValue

但这正是renderValue期望/要求的。一个函数。具体类型：(value: unknown) => ReactNode.

如果您的SelectedData函数返回 aReactNode那么您可以将其包装在一个函数中以传递给该属性：

renderValue={() => SelectedData(studentList!)}

Demo或者，也许您只是忘记从回来SelectedData？如果您显示的代码是SelectedData. 在这种情况下，您仍然可以这样做：

renderValue={SelectedData(studentList!)}

但SelectedData需要返回renderValue期望的类型。就像是：

let blankArray = [];
const Demo = (studentList:any): React.ReactNode => {
    studentList.map((studentName :string) => {
        blankArray.push(studentList.studentName);
    });     
    return blankArray.join(", ");
}
return Demo;

无论您怎么看，您需要传递给的内容renderValue都必须是 type (value: unknown) => ReactNode。

推荐阅读