<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component {
// 初始化状态
state = {
todos:[
'A',
'B',
'C',
'D'
]
}
//向todos 中添加todo
addTodo = (todo) => {
// 得到状态数据todos
const {todos} = this.state
// 跟新状态数据
todos.unshift(todo)
//更新状态
this.setState({
todos
})
}
render () {
console.log('App render()')
// 读取内部状态数据
const {todos} = this.state
return (
<div>
<h1>TODO LIST</h1>
<Add size={todos.length} addTodo={this.addTodo}/>
<List todos={todos}/>
</div>
)
}
}
class Add extends React.Component {
static propType = {
size: PropTypes.number.isRequired,
addTodo: PropTypes.func.isRequired
}
addTodo = () => {
// 1.得到输入的todo
const todo = this.refs.todo.value
// 2.将todo添加到todos中
this.props.addTodo(todo)
//3.清除输入
this.refs.todo.value = ''
}
render () {
const {size} = this.props
return (
<div>
<input type="text" ref="todo"/>
<button onClick={this.addTodo}>Add #{size}</button>
</div>
)
}
}
class List extends React.Component {
// 声明接收哪些标签属性
static propTypes = {
todos: PropTypes.array.isRequired
}
render () {
// 读取外部传输的属性数据
const {todos} = this.props
return (
<ul>
{
todos.map((todo, index) => {
return <li key={index}>{todo}</li>
})
}
</ul>
)
}
}
ReactDOM.render(<App/>, document.getElementById('example'))
</script>
<body>
</body>
</html>
react练习
最新推荐文章于 2024-09-25 01:42:14 发布