import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
var TodoList = React.createClass({
getInitialState: function() {
return {items: []};
},
handleAdd: function() {
var newItem = this.refs.newItem.value;
if (newItem.length == 0) {
return;
}
this.refs.newItem.value = "";
this.refs.newItem.focus();
this.setState({items: this.state.items.concat(newItem)});
},
render: function() {
return (
<div>
<h2>Todo List</h2>
<ul>
{
this.state.items.map(function(item) {
return <li>{item}</li>
})
}
</ul>
<input type="text" ref="newItem" />
<input type="button"
value={'Add #' + (this.state.items.length + 1)}
onClick={this.handleAdd}>
</input>
</div>
)
},
});
var TodoApp = React.createClass({
render: function() {
return (
<TodoList />
);
}
})
ReactDOM.render(
<TodoApp />,
document.getElementById('root')
);
react Todo List
最新推荐文章于 2023-03-16 10:36:47 发布