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'))

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值