【组件】动态列表展示

最新推荐文章于 2024-03-08 15:13:39 发布

多喝热水　

最新推荐文章于 2024-03-08 15:13:39 发布

阅读量221

点赞数

分类专栏： React相关

本文链接：https://blog.csdn.net/qq_35350265/article/details/111576481

版权

React相关专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		1.显示所有todo列表
		2.输入文本，点击按钮显示到列表首位，并清除输入文本
		  -->
		<div id="example1"></div>
		
		
		<script type="text/babel">
		
		// 1.数据保存在那个组件内？
		// 看数据是某个组件需要它（给它），还是某些组件需要(给共同的父组件)
		// 2.需要在子组件中改变父组件的状态
		// 状态在哪个组件，更新状态的行为就应该定义在那个组件
		// 解决：父组件定义函数，传递给子组件，子组件调用
		    //1.定义组件
			class App extends React.Component{
				constructor(props) {
					super(props)
					//初始化状态
					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(
					    <div>
						    <h1>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 = ''
				}
				//<!-- 表单input接受的数据传送给后台this.todoInput参数 -->
				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(){
					const {todos} = this.props
					return(
					   <ul>
							{
								todos.map((todo,index) => {return <li key={index}>{todo}</li>})
							}
					   </ul>
					)
				}
			}
			//2.渲染组件标签
			ReactDOM.render(<App />,document.getElementById('example1'))
		</script>
		
		<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
		<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
		<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
	</body>
</html>

多喝热水　

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【组件】动态列表展示

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body>  <div id="example1"></div> &...
复制链接

扫一扫