全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></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://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 编写react代码 -->
<script type="text/babel">
// 最主要的组件
class App extends React.Component {
state = {
todolist: ['吃饭', '睡觉', '打豆豆']
}
addList = (data) => {
let { todolist } = this.state
todolist.unshift(data)
this.setState({ todolist: todolist })
}
render() {
let { todolist } = this.state
return (
<div>
<h2>TODOLIST</h2>
<Add addList={this.addList} count={todolist.length} />
<List todolist={todolist} />
</div>
)
}
}
// 输入框+按钮=组件Add
class Add extends React.Component {
add = () => {
let userInput = this.input.value
// alert(userInput)
if (userInput.trim() === '') return
this.props.addList(userInput)
this.input.value = ''
}
render() {
let { count } = this.props
return (
<div>
<input type="text" placeholder='请输入事件' ref={(input) => { this.input = input }} />
<button onClick={this.add}>提交 #{count}</button>
</div>
)
}
}
// 列表组件
class List extends React.Component {
render() {
let { todolist } = this.props
return (
<div>
<ul>
{
todolist.map((item, index) => <li key={index}>{item}</li>)
}
</ul>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
</html>