浅谈React实现todolist

来源：互联网发布：批处理软件编辑：程序博客网时间：2024/05/17 04:15

todoList.html：

<!DOCTYPE html><html><head><link rel="stylesheet" href="todoList.css"><script src="build/react.js"></script><script src="build/react-dom.js"></script><script src="build/browser.min.js"></script></head><body><div id="todoList"></div><script type="text/babel" src="todoList.jsx"></script></body></html>

todoList.jsx：

var TodoList = React.createClass({getInitialState: function() {return {lists: []}},addList: function(list) {if (this.state.lists.indexOf(list) == -1) {this.state.lists.push(list);this.setState({lists: this.state.lists});}},deleteList: function(index) {this.state.lists.splice(index, 1);this.setState({lists: this.state.lists});},render: function() {return (<div><AddList addList={this.addList} /><DeleteList deleteList={this.deleteList} lists={this.state.lists} /></div>);}});var AddList = React.createClass({addList: function(e) {e.preventDefault();this.props.addList(this.refs.textInput.value);this.refs.textInput.value = "";},render: function() {return (<form onSubmit={this.addList}><input type="text" placeholder="Please enter your name!" ref="textInput" autoComplete="off"/></form>);}});var DeleteList = React.createClass({deleteList: function(e) {var index = e.target.getAttribute('id');this.props.deleteList(index);},render: function() {return (<ul>{this.props.lists.map(function(list, index) {return (<li key={index}> {list}<button id={index} onClick={this.deleteList}>x</button></li>);}.bind(this))}</ul>);}});ReactDOM.render(<TodoList />,document.getElementById("todoList"));

1 0