前端之家收集整理的这篇文章主要介绍了
react Todo List，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_404_3@import React from 'react';
@H_404_3@import ReactDOM from 'react-dom';
@H_404_3@import App from './App';
@H_404_3@import './index.css';
@H_404_3@var TodoList = React.createClass({
getInitialState: @H_404_3@function() {
@H_404_3@return {items: []};
},handleAdd: @H_404_3@function() {
@H_404_3@var newItem = @H_404_3@this.refs.newItem.value;
@H_404_3@if (newItem.length == 0) {
@H_404_3@return;
}
@H_404_3@this.refs.newItem.value = "";
@H_404_3@this.refs.newItem.focus();
@H_404_3@this.setState({items: @H_404_3@this.state.items.concat(newItem)});
},render: @H_404_3@function() {
@H_404_3@return (
<div>
<h2>Todo List</h2>
<ul>
{
@H_404_3@this.state.items.map(@H_404_3@function(item) {
@H_404_3@return <li>{item}</li>
})
}
</ul>
<input type="text" ref="newItem" />
<input type="button"
value={'Add #' + (@H_404_3@this.state.items.length + 1)}
onClick={@H_404_3@this.handleAdd}>
</input>
</div>
)
},});
@H_404_3@var TodoApp = React.createClass({
render: @H_404_3@function() {
@H_404_3@return (
<TodoList />
);
}
})
ReactDOM.render(
<TodoApp />,document.getElementById('root')
);
