javascript - React JS将 'disabled'类添加到多个索引

Question

如果用户单击列表中的元素，我想添加一个禁用的类。

目前，这适用于用户单击的每个项目，但是，如果单击其他索引，则需要保留该类，例如:

如果用户单击列表中的任何元素，则添加“禁用”，如果用户单击任何其他元素，则添加“禁用”类，并保留所有其他禁用类，除非用户选择从项目中删除。

这是包含数据的状态对象:

insightData: [
    {
        id: 0,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 1,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 2,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 3,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 4,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 5,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 6,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 7,
        title: 'Bill shock',
        isSelected: false,
    },
    {
        id: 8,
        title: 'Bill shock',
        isSelected: false,
    },
]

更新功能:

updateInsights(index) {
        const { selectedInsights, insightData } = this.state;

        this.setState({
            selectedInsights: true,
            insightData: insightData.map(item => ({
            ...item,
            isSelected: item.id === index

            }))
        })

    }

用法:

<ul>
    {this.state.insightData.map((item, z) => {
        const disabled = this.state.insightData[z].isSelected;

        return (
            <li key={z}>
                <span className="insight-title">{item.title}</span>
                <span className={classNames("add", {disabled})} onClick={() => this.updateInsights(item.id)}>Add to project</span>
            </li>
        )
    })}

</ul>

Answer 1

您需要像这样更改条件。

isSelected: item.id === index ? true : item.isSelected

更新后的函数 updateInsights 应如下所示。

updateInsights(index) {
        const { selectedInsights, insightData } = this.state;

        this.setState({
            selectedInsights: true,
            insightData: insightData.map(item => ({
            ...item,
            isSelected: item.id === index ? true : item.isSelected
            }))
        })

    }

希望这对您有用!