如何在React版Kendo UI Grid中使用MultiSelect作为列编辑器？

先修正你代码里的明显语法错误：

• <Column>的闭合标签写错了，应该是</Column>，不是</Colum>a
• Kendo React的多选组件是大驼峰命名，应该是MultiSelect，不是Multiselect

然后重点说Grid列编辑器的正确用法——不能直接把MultiSelect塞到<Column>标签里，得通过编辑器属性或编辑模板来配置，下面给两种可行的实现方式：

方式一：自定义编辑器组件+editor属性 #

先写一个独立的MultiSelect编辑器组件，再绑定到Grid列的editor属性上：

import { Grid, Column } from '@progress/kendo-react-grid';
import { MultiSelect } from '@progress/kendo-react-dropdowns';

// 自定义多选编辑器
const MultiSelectEditor = (props) => {
  const handleSelectChange = (event) => {
    // 调用Grid的onChange更新当前行数据
    props.onChange({
      dataItem: props.dataItem,
      field: props.field,
      value: event.target.value
    });
  };

  return (
    <MultiSelect
      data={sports}
      value={props.dataItem[props.field]}
      onChange={handleSelectChange}
      textField="text"
      dataItemKey="id"
      style={{ width: "300px" }}
      placeholder="Please select ..."
    />
  );
};

// Grid组件使用示例
<Grid data={yourGridData} editable={{ mode: "inline" }}>
  <Column
    field="selectedSports" // 对应你数据里存选中项的字段名
    title="Selected Sports"
    editor={MultiSelectEditor}
    // 自定义单元格显示已选内容的模板
    cell={(props) => (
      <span>
        {props.dataItem.selectedSports?.map(item => item.text).join(', ') || 'No selection'}
      </span>
    )}
  />
</Grid>

方式二：直接用editTemplate #

如果逻辑简单，也可以直接在列的editTemplate里写MultiSelect：

<Grid data={yourGridData} editable={{ mode: "inline" }}>
  <Column
    field="selectedSports"
    title="Selected Sports"
    cell={(props) => (
      <span>
        {props.dataItem.selectedSports?.map(item => item.text).join(', ') || 'No selection'}
      </span>
    )}
    editTemplate={(props) => (
      <MultiSelect
        data={sports}
        value={props.dataItem.selectedSports}
        onChange={(e) => {
          // 直接更新当前行数据并通知Grid
          props.dataItem.selectedSports = e.target.value;
          props.onChange(props.dataItem);
        }}
        textField="text"
        dataItemKey="id"
        style={{ width: "300px" }}
        placeholder="Please select ..."
      />
    )}
  />
</Grid>

几个关键注意点 #

• 必须给Grid开启编辑模式，比如editable={{ mode: "inline" }}或者"popup"，不然编辑器不会触发
• MultiSelect的value要绑定到当前行数据的对应字段，不能用单独的value变量，这样才能和Grid的编辑状态同步
• 处理 onChange 时，一定要通过Grid提供的回调更新数据，保证Grid能感知到数据变化

内容的提问来源于stack exchange，提问作者F.Rhman