第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

【備戰(zhàn)春招】第2天 React實戰(zhàn)

標簽:
React

**课程名称:** React16.4 快速上手

**课程章节:第2章 React实战

课程讲师: Dell

课程内容:
1、首先创建一个todolist.js组件

import React from 'react'

class TodoList extends React.Component {

	render(){
		return (
			<div>
				todolist
			</div>
		)
	}
}

2、定义输入input还有渲染的ul

import React from 'react'

class TodoList extends React.Component {
	
	render(){
		return (
			<div>
				<div>
					<input  />
					<button>add </button>
				</div>
				<ul>
					<li>学习react</li>
					<li>学习vue</li>
				</ul>
			</div>
		)
	}
}

3、添加state,循环渲染state

import React from 'react'

class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
		}
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
		})
	}

	render(){
		return (
			<div>
				<div>
					<input />
					<button onClick={this.handleBthClick.bind(this)}>add </button>
				</div>
				<ul>
					{
·						this.state.list.map((item,index) => {
							return <li key={index} >{item}</li>
						})
					}
					
				</ul>
			</div>
		)
	}
}

4、对input添加绑定事件实现添加

import React from 'react'

class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
			inputValue:''
		}
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
			inputValue:''
		})
		this.state.list.push('hello world')
	}
	handleInputChange(e){]
		this.setState({
			inputValue:e.target.value
		})
	}
	render(){
		return (
			<div>
				<div>
					<input onClick={this.handleInputChange.bind(this)} />
					<button onClick={this.handleBthClick.bind(this)}>add </button>
				</div>
				<ul>
					{
·						this.state.list.map((item,index) => {
							return <li key={index} onClick={this.handleItemClick.bind(this)}>{item}</li>
						})
					}
					
				</ul>
			</div>
		)
	}
}

5、给每一个li删除事件

import React from 'react'

class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
			inputValue:''
		}
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
			inputValue:''
		})
		this.state.list.push('hello world')
	}
	handleInputChange(e){]
		this.setState({
			inputValue:e.target.value
		})
	}
	handleItemClick(index){
		const list = [...this.state.list]
		list.splice(index,1)
		this.setState({
			list:list
		})
		
	}
	render(){
		return (
			<div>
				<div>
					<input onClick={this.handleInputChange.bind(this)} />
					<button onClick={this.handleBthClick.bind(this)}>add </button>
				</div>
				<ul>
					{
·						this.state.list.map((item,index) => {
							return <li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
						})
					}
					
				</ul>
			</div>
		)
	}
}

课程收获:
学习到了在react中需要在最外层嵌套一个外部标签

才可以正常的渲染,否则就会报错,利用onClick={this.handleBthClick}给元素添加点击事件,其中利用bind定义this,否则函数中的this使用的是元素本身,使用this.state定义数据,使用{this.state.list.map}对数据进行循环使用,使用循环的时候参数添加index,绑定key值,否则会报错,重新定义一个inputValue的值,添加后赋值为空,

點擊查看更多內(nèi)容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消