如何将选项标记为选中

Question

如何将选定属性设置为<SelectArrayInput> 组件内的选项？我还没有意识到如何设置选定的属性。

我已经尝试将一个已选择的属性放在那里，但它似乎不起作用。

const tec = [
    { name: "Apple", id: 1, selected: true},
    { name: "Facebook", id: 2 },
    { name: "Netflix", id: 3 },
    { name: "Tesla", id: 4 },
    ];

const ReferrenceSelectBox = ({ source, record = {} }) => <SelectArrayInput choices={ tec } />;

ReferrenceSelectBox.propTypes = {
    label: PropTypes.string,
    record: PropTypes.object,
    source: PropTypes.string.isRequired,
};

export default ReferrenceSelectBox;

我希望 <SelectArrayInput> 的输出带有已选择的选项。

Answer 1

我无法获得使用 react-admin 的代码沙箱，但从 documentation 看来，它使用 Material-ui 中的 Select 作为基础。

在 Material-UI 中，您可以将要选择的值作为道具传递：value，它采用您想要的 ids 数组。

因此，在您的情况下，您可以创建另一个数组来捕获 selectedIds 并将其作为 value 属性传递，而不是使用 selected 属性，它应该可以工作。

const tec = [
    { name: "Apple", id: 1},
    { name: "Facebook", id: 2 },
    { name: "Netflix", id: 3 },
    { name: "Tesla", id: 4 },
    ];
const selectedTec = [1];
const ReferrenceSelectBox = ({ source, record = {} }) => <SelectArrayInput value={ selectedTec } choices={ tec } />;

ReferrenceSelectBox.propTypes = {
    label: PropTypes.string,
    record: PropTypes.object,
    source: PropTypes.string.isRequired,
};

export default ReferrenceSelectBox;