<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<div id="app2"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src= "../js/babel.min.js"></script>
<!-- //告诉babeljs解析jsx代码 -->
<script type="text/babel">
/*
问题：
数据保存在哪个组件中：
看数据是某个组件需要，还是某些组件需要(给共同的父组件)
需要在子组件中改变父组件的状态：
子组件中不能直接改变父组件中的状态
状态在哪个组件内就在哪个组件中更新状态
解决：
父组件定义函数，传递给子组件，子组件调用
编写的流程：
1、拆分组件
2、实现静态组件(只有静态界面，没有动态数据，也没有交互)
3、实现动态交互
3.1实现初始化数据动态显示
3.2实现交互功能
*/
class App extends React.Component {
constructor(props){
super(props)
// 1、初始化状态
this.state = {
todos: ['吃饭','睡觉' ,'打豆豆']
}
this.addTodo = this.addTodo.bind(this)
}
addTodo(todo){
const {todos} = this.state
todos.unshift(todo)
// 更新状态
this.setState({todos})
}
render(){
const {todos} = this.state
return (
// 2、读取状态的值
<div>
<h1>Simple TODO List</h1>
<Add count={todos.length} addTodo={this.addTodo}/>
<List todos={todos}/>
</div>
)
}
}
class Add extends React.Component {
constructor(props){
super(props)
this.add = this.add.bind(this)
}
add(){
// 1、读取输入的数据
const todo = this.todoinput.value.trim()
// 2、检查合法性
if(!todo){
return
}
// 3、添加
this.props.addTodo(todo)
// 4、清空
this.todoinput.value = ''
}
render(){
return (
<div>
<input type="text" ref={input => this.todoinput=input}/>
<button onClick={this.add}>add #{this.props.count+1}</button>
</div>
)
}
}
Add.propTypes = {
count: PropTypes.number.isRequired,
addTodo: PropTypes.func.isRequired
}
class List extends React.Component {
render() {
return (
// 4、修改状态值
<div>
<ul>
{this.props.todos.map((todo,index)=><li key={index}>{todo}</li>)}
</ul>
</div>
)
}
}
// 3、限制状态值
List.propTypes = {
todos:PropTypes.array.isRequired
}
ReactDOM.render(<App/> ,document.getElementById('app'))
</script>
</body>
</html>
