一个简单的 react 实例： < TodoList >

 <  react     TodoList:  >

组件：

//引入React ；
import React  from 'react';
//组件
class TodoList extends React.Component{
  constructor(props){
    super(props);
    this.state={
     list :[],
     inputValue:""
    }
  }
  //按钮的点击事件；
  addClick(){
    this.setState({
      list:[...this.state.list, this.state.inputValue],
      inputValue:""
    })
  }
  // input 里面的onChange 事件；
  addChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  //map 循环后的删除事件；
  handleItemClick(index){ 
    // 这个会打印出每条数据的下标
    // console.log(index)
    const list = [...this.state.list];
    list.splice(index,1)
    this.setState({list:list})    
  }
  render(){      
    return(
      <div>
        <input value={this.state.inputValue} onChange={this.addChange.bind(this)}/>
        <button onClick={this.addClick.bind(this)}>add</button>
        <ul>
          {
            this.state.list.map((item, index)=>{
              return<li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
            })
          }   
        </ul>
      </div>
    )
  }
}

//抛出去
export default TodoList 

index.js 文件

//引入React库
import React from 'react';

import ReactDOM from 'react-dom';
// 引入TOdoList组件
import TodoList from './TodoList'

ReactDOM.render(<TodoList />, document.getElementById('root'));

 

代码有那点不完善的，还请留言指出哦！