import React, { Component, Fragment } from 'react'
import './TodoList.css'

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
  }

  render() {
    return (
      < Fragment >
        {/* Fragment 来产生唯一包裹，但不会新生标签 */}
        <div>
          <label
            // 使用 htmlFor 代替 for，避免混淆
            htmlFor='innerText'
          >输入内容</label>
          <input
            id='innerText'
            // 注意用 className 而不是 class，避免与类混淆
            className='input'
            // 绑定数据
            value={this.state.inputValue}
            // 绑定方法的 this 指向
            onChange={this.handleInputChange.bind(this)}
          />
          <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        </div>
        <ul>
          {
            // 遍历数据并展示
            this.state.list.map((item, index) => {
              // 注意需要绑定 key 值
              return (
                <li
                  key={index}
                  onClick={this.handleItemDelete.bind(this, index)}
                // 如果需要键入 html 元素标签，请使用这种方方法（顾名思义，危险，可能遭受 xss 攻击，谨慎使用）
                // dangerouslySetInnerHTML={{ __html: item }}
                >
                  {item}
                </li>
              )
            })
          }
        </ul>
      </Fragment >
    )
  }

  // 输入框更新数据
  handleInputChange(e) {
    // 数据更新需用 setState 方法
    this.setState({ inputValue: e.target.value })
  }

  // 点击提交
  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  // 点击删除项
  handleItemDelete(index) {
    // 错误做法：this.state.list.splice(index, 1)
    // immutable 概念：state 不允许我们直接修改里面的值（性能优化）
    const list = [...this.state.list]
    list.splice(index, 1)

    this.setState({
      list: list
    })
  }
}

export default TodoList;