使用 React 做一个 TodoList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<div id="example"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
state = { todos: ['吃饭', '睡觉', '敲代码'] }
addTodos = (thing) => {
let todos = [...this.state.todos]
todos.unshift(thing)
this.setState({todos})
}
render() {
const { todos } = this.state
return (
<div>
<h1>Simple Todo</h1>
<Add count={todos.length} addTodos={this.addTodos}/>
<Lists todos={todos} />
</div>
)
}
}
class Add extends React.Component {
add = () => {
let {addTodos} = this.props
let content = this.todoInput.value.trim()
addTodos(content)
this.todoInput.value = ''
}
render() {
const {count} = this.props
return (
<div>
<input type="text" ref={(input) => {this.todoInput = input}}/>
<button onClick={this.add}>Add#{count}</button>
</div>
)
}
}
class Lists extends React.Component {
render() {
const {todos} = this.props
return (
<div>
<ul>
{todos.map((item, index) => {
return<li key={index}>{item}</li>
})}
</ul>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('example'));
</script>
</body>
</html>
