react实现选项卡

<div id="app">

  </div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
  <script type="text/babel">
    let todos = ['吃饭','睡觉','打豆豆']
    // 定义一个绑定到 input 框的数据
    let inputVal = ''
    // 定义一个changeInput的函数
    const changeInput = (e) => {
      // 1. 获取输入的内容
      let value = e.target.value
      // 2. 修改inputVal这个数据
      inputVal = value
      // 3. 重新调用一次 render 函数
      render()
    }
    // 定义一个addTodo的函数
    const addTodo = () => {
      // 1. 将 inputVal 的值追加到 todos 中
      todos.push(inputVal)
      // 2. 重新调用 render
      inputVal = ''
      render()
    }
    let brr = []
    let a = null;
    const delTodo = (index) => {
      // 1. 删除 todos 中某一项
      todos.splice(index, 1)
      // 2. render()
      render()
    }
    const brrTodo = (index) => {
      brr.splice(index,1)
      render()
    }
    const show = (index) => {
      console.log(index)
      a = todos.splice(index, 1)
      brr.push(a)
      console.log(a, brr)
      render()
    }
    const showTo = (index) => {
      a = brr.splice(index, 1)
      todos.push(a)
      render()
    }
    const handleEnterKey = (target) =>{
      if(target.nativeEvent.keyCode === 13 ){
        addTodo()
      }
    }
    // 定义一个render函数
    const render = () => {
      // 创建一个元素变量
      const TodoApp = (
        <div>
          <div>
            <input type="text" 
            placeholder="请输入" 
            value={inputVal} 
            onChange={changeInput} 
            onKeyPress={ handleEnterKey }
            />
            <button onClick={addTodo}>Add</button>
          </div>

          <ul>
            {
              todos.map((item, index) => {
                return (
                  <li key={index}>
                    <button onClick={()=> { show(index) }}>&times;</button>
                    <span>{ item }</span>
                    <button onClick={() => { delTodo(index) }}>&times;</button>
                  </li>
                )
              })
            }
          </ul>
          <hr/>
          <ul>
            {
              brr.map((item, index) => {
                return (
                  <li key={index}>
                    <button onClick={()=> { showTo(index) }}>&times;</button>
                    <span>{ item }</span>
                    <button onClick={() => { brrTodo(index) }}>&times;</button>
                  </li>
                )
              })
            }
          </ul>
        </div>
      )
      ReactDOM.render(TodoApp, document.getElementById('app'))
    }

    // 默认执行一次 render 函数
    render()
  </script>