React基于e.target的值更新状态：优化现有点击处理方法

嘿，你之前注释掉的动态键名写法其实完全是正确的方向！咱们只需要调整几个细节，就能把那些冗余的if判断全部干掉，让代码简洁又易维护。

先看一下核心问题：你原来通过多个if判断来分别设置button1、button2...的状态，本质上只是键名的数字部分在变化，完全可以用ES6计算属性名来动态生成键名，一次性完成状态更新。

优化后的完整代码 #

handleClick = (e) => {
  // 解构props，减少重复的this.props书写
  const { onClick, getAnswer } = this.props;
  onClick();

  // 用HTML5 dataset API获取data-option值，比getAttribute更直观
  const option = e.target.dataset.option;
  if (getAnswer(e)) {
    console.log('correct');
    // 计算属性名动态生成状态键，替代多if判断
    this.setState({ [`button${option}`]: 'correct' });
  }
}

关键优化点解析 #

• 替换getAttribute为dataset：e.target.dataset.option是HTML5标准的data-*属性获取方式，写法比getAttribute更简洁直观，可读性更强。
• 用计算属性名简化状态更新：通过模板字符串button${option}拼出对应的状态键名（比如button1、button2），再用方括号[]包裹作为对象的键——这就是ES6的计算属性名特性，完美解决了多分支判断的冗余问题。
• 解构props优化代码结构：把需要用到的props属性解构出来，避免重复书写this.props，让代码逻辑更清晰。

这样调整后，不管后续新增多少个选项，都不用再额外添加if判断了，只要保证data-option的数值和状态键的数字对应即可，代码的可维护性提升了不少！

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