react鼠标移动事件加减dom？

Question

const GroupList = () => {
  return (
    <ul className="lcx02_newGroup-list">
      <li><span className="text-ellP">未分组</span>（4）</li>
      <li><span className="text-ellP">未分组</span>（2）</li>
      <li><span className="text-ellP">未分组</span>（5）</li>
      <li><span className="text-ellP">未分组</span>（3）</li>
      <li className="active">
        <span className="text-ellP">为分组1分组分组</span>(1)
        <span className="lcx02_delete fr" />
        <span className="lcx02_edit fr" />
      </li>
    </ul>
  );
};

组件如上，需要在鼠标移动到li上的时候添加两个span，移走的时候删除li下面的两个span,没思路，咋写呀，各位大神给点思路呗？

Answer 1

  onmouseenter(){
    this.setState({isShow: true});
  },
  onmouseleave(){
    this.setState({isShow: false});
  },

  <li onMouseEnter={this.onmouseenter} onMouseLeave={this.onmouseleave}>
    {this.state.isShow?
           123: <span>222</span>
    }
  </li>

Answer 2

没人回答，这可咋整？