Skip to content

Instantly share code, notes, and snippets.

@wellwind

wellwind/todo_list.jsx

Last active Apr 3, 2016
Embed
What would you like to do?
[程式碼片段][React速成班]從TodoList範例學習React(3)-透過實作AddTodoForm學習state, 文章網址: https://dotblogs.com.tw/wellwind/2016/04/03/react-tutorial-7-state
var TodoItem = React.createClass({
render: function(){
return (<li key={this.props.key}>{this.props.children}</li>);
}
})
var TodoItems = React.createClass({
render: function() {
var displayItems = this.props.items.map(function(item) {
return (<TodoItem key={item.id}>{item.data}</TodoItem>);
// return (<li key={item.id}>{item.data}</li>);
});
return (
<div>
<ul>
{displayItems}
</ul>
</div>
);
}
});
var AddTodoForm = React.createClass({
getInitialState: function(){
return {todoText: ""};
},
handleTodoChange: function(e){
this.setState({todoText: e.target.value});
},
handleAddTodoItem: function(e){
// console.log(this.state.todoText);
// 如何將資料新增到TodoItems中?
// 呼叫以props傳進來的addItem
this.props.addItem(this.state.todoText);
},
render: function() {
return (
<div>
<input type="text"
value={this.state.todoText}
onChange={this.handleTodoChange}/>
<button
onClick={this.handleAddTodoItem}>Add Todo Item</button>
</div>
);
}
});
var TodoList = React.createClass({
getInitialState: function(){
return {
todoItems:
[{ id: 1, data: "Item 1" },
{ id: 2, data: "Item 2" }]
};
},
handleAddTodoItem: function(todoText){
var items = this.state.todoItems;
items.push({
id: items.length + 1,
data: todoText
});
this.setState({todoItems: items});
},
render: function() {
return (
<div className="todoList">
<h1>Todo List</h1>
<TodoItems items={this.state.todoItems}/>
<AddTodoForm addItem={this.handleAddTodoItem}/>
</div>
);
}
});
ReactDOM.render(
<TodoList />,
document.getElementById("content")
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment