React嵌套map中handleClick使用bind绑定不生效如何解决？

问题原因 #

• 调用setState更新open状态时直接覆盖了原有对象，导致其他标签的存储状态丢失
• React DOM 中必须使用className属性指定HTML类名，你代码中使用的class属性不会被识别，样式无法正常应用
• 额外补充：嵌套map完全不会影响bind绑定逻辑，你用箭头函数定义的handleClick本身已经绑定了this，不需要额外bind
• 原有代码缺少列表渲染必需的key属性，也没有根节点包裹map返回的多组元素，会触发React报错

修正后的代码 #

class Blog extends React.Component {
  state = {
    open: {}
  }

  handleClick = (k) => {
    // 函数式更新获取最新状态，复制原有open对象避免覆盖其他标签状态
    this.setState(prevState => ({
      open: {
        ...prevState.open,
        [k]: !prevState.open[k] ?? true
      }
    }))
  }

  render() {
    // 若posts是props传入的参数，需要替换为this.props.posts
    return (
      <div> {/* 包裹根元素避免多根节点报错 */}
        {posts.map(i => (
          <div className="box" key={i.id}> {/* 加唯一key属性符合React列表渲染要求 */}
            <article className="media">
              <div className="media-content">
                <div className="content">
                  <h1 className="title">{i.title}</h1>
                  <p>{i.content}</p>
                </div>
                <div className="tags">
                  {i.hash.map(k => (
                    <span 
                      key={k} 
                      id={k} 
                      onClick={() => this.handleClick(k)} 
                      className={this.state.open[k] ? "tag is-primary" : "tag"} 
                    >
                      {k}
                    </span>
                  ))}
                </div>
              </div>
            </article>
          </div>
        ))}
      </div>
    )
  }
}
export default Blog

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