列表组件
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} onchange={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'))