React中使用Event.target.id实现组件向上传值是否合理？

你的核心思路是对的——父组件作为唯一数据源维护选中状态，完全符合React单向数据流的设计理念，别考虑让子组件各自维护状态再遍历组件的方案，那会给后续维护埋下很多坑。

当前实现的小问题 #

你用event.target.id来获取选中项ID的方式有隐患：如果子组件的点击元素内部有嵌套结构（比如<button id="1"><span>法术名称</span></button>），点击时event.target可能指向内部的<span>而不是设置了ID的按钮，导致取错ID。

优化方案：直接传递明确的ID参数 #

不要依赖事件对象，而是在子组件触发点击时，直接把对应的法术ID传递给父组件的回调函数，这样更可靠也更清晰。

父组件代码修改：

constructor(props){ 
    super(props)
    this.state = {
        showDialog : false,
        preparedSpells: [],
    }
    // 绑定this，避免回调中this指向错误
    this.onPrep = this.onPrep.bind(this)
}

onPrep(spellId){
    // 使用函数式setState，确保基于最新状态更新
    this.setState(prevState => {
        const preparedSpells = [...prevState.preparedSpells];
        const index = preparedSpells.indexOf(spellId);
        if (index !== -1) {
            preparedSpells.splice(index, 1);
        } else {
            preparedSpells.push(spellId);
        }
        return { preparedSpells };
    });
}

render(){
     return(
        <SpellList spells={this.spells} onSpellClick={this.onSpellClick} onPrep={this.onPrep} />
     );
}

子组件（SpellList/SpellItem）修改：

在渲染单个列表项时，直接把当前法术的ID作为参数传给父组件的onPrep：

// SpellList组件示例
function SpellList({ spells, onSpellClick, onPrep }) {
    return (
        <div>
            {spells.map(spell => (
                <SpellItem 
                    key={spell.id} 
                    spell={spell} 
                    onSpellClick={onSpellClick} 
                    onClick={() => onPrep(spell.id)} 
                />
            ))}
        </div>
    );
}

为什么不推荐子组件维护状态？ #

如果让每个列表项自己存选中状态，后续会遇到这些问题：

• 父组件要获取所有选中项，得通过ref遍历所有子组件实例，React官方不推荐直接操作组件实例，容易引发状态不同步。
• 当需要批量操作选中状态（比如全选、清空选中）时，得逐个通知子组件更新，代码复杂度飙升。
• 状态分散在多个子组件中，调试和维护成本会很高。

总结 #

你最初的“父组件作为唯一数据源”的思路是完全正确的，只需要优化传递ID的方式，去掉对event.target的依赖，改用直接传递明确参数的方式，代码会更健壮、可读性更强。

内容的提问来源于stack exchange，提问作者Lo_