react动态增加列表

列表组件

class  TodoList  extends  React.Component{

    render(){

    return(

      <ul>

    {this.props.todos.map((todo,index)=>{

    <li   key={index}>{todo}</li>

 })

   }

     </ul>

  )

}

}

TodoList.PropTypes={

 todos:React.Proptypes.array.isRequired

}

2.应用组件

class App extends React.Component{

contructor(props){

   super(props);

 this.state={

   todos:['hello','Owen' ,'linda']

}

}

addTodo(){

   var inputTodo=this.refs.inputTodo.value;

if(inputTodo.trim()==''){

  return

}

  var todos=this.state.todos.unshift(inputTodo);

this.setState({todos})

//移除数据

this.refs.inputTodo.value='';

}

   render(){

   return(

   <div>

   <h2>Simple TdDo List</h2>

   <input type='text' ref='inputTodo'>

  <button Onclick={this.addTodo.bind(this)}>Add #4</button>

 <TodoList  todos={this.state.todos}></TodoList>

  </div>.

  ) 

  }

}

ReatDOM.render(<App/>,document.getElementById('root'))

 

第二种写法，不通过ref手动取值，

列表组件

class  TodoList  extends  React.Component{

    render(){

    return(

      <ul>

    {this.props.todos.map((todo,index)=>{

    <li   key={index}>{todo}</li>

 })

   }

     </ul>

  )

}

}

TodoList.PropTypes={

 todos:React.Proptypes.array.isRequired

}

2.应用组件

class App extends React.Component{

contructor(props){

   super(props);

 this.state={

   todos:['hello','Owen' ,'linda'],

  inputTodo:''

}

}

handleChange(event){

 var   inputTodo=event.target.value.trim();

this.setState(inputTodo)

}

addTodo(){

   var inputTodo=this.state.inputTodo;

if(inputTodo.trim()==''){

  return

}

  var todos=this.state.todos.unshift(inputTodo);

this.setState({todos})

//移除数据

this.setState({input:''});

}

   render(){

   return(

   <div>

   <h2>Simple TdDo List</h2>

   <input type='text'  value={this.state.inputTodo} οnchange={this.handleChange.bind(this)}>

  <button Onclick={this.addTodo.bind(this)}>Add #4</button>

 <TodoList  todos={this.state.todos}></TodoList>

  </div>.

  ) 

  }

}

ReatDOM.render(<App/>,document.getElementById('root'))