嵌套组件
ES7 插件生成react模板快捷键，rcc
import React, { Component } from 'react'
class Navbar extends Component{
render(){
return <div>Navbar</div>
}
}
function Swiper(){
return <div>Swiper</div>
}
// const Tabbar=()=>{
// return <div>Tabbar</div>
// }
const Tabbar=()=><div>Tabbar</div>
export default class App extends Component {
render() {
return (
<div>
<Navbar></Navbar>
<Swiper></Swiper>
<Tabbar></Tabbar>
</div>
)
}
}
组件样式以及js
import React, { Component } from 'react'
import './css/01-index.css'
export default class App extends Component {
render() {
let myname = 'zhangsan'
let styleobj = {
backgroundColor:'yellow'
}
return (
<div>
<div style={styleobj}>{10+10}={myname}</div>
<div className='active'>sfsfsff</div>
<label htmlFor="username">用户名:</label>
<input type="text" id="username"/>
</div>
)
}
}
事件处理
四种处理方式
- 直接写
- 通过函数调用
- 箭头函数
- 箭头函数内调用
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
<input/>
<button onClick={()=>{
alert('hello world1')
}}>add1</button>
<button onClick={this.handleClick}>add2</button>
<button onClick={this.handleClick3}>add3</button>
<button onClick={()=>{
this.handleClick4()//适合传参
}}>add4</button>
</div>
)
}
handleClick(){
alert('hello world2')
}
handleClick3=()=>{
alert('hello world3')
}
handleClick4=()=>{
alert('hello world4')
}
}
react并不会真正的绑定事件到每个元素上，而是采用事件代理的模式
Event对象
和普通浏览器一样，事件handler会被自动传入一个event对象，这个对象和普通的浏览器所包含的方法和属性都基本一致。不同的是React中的event对象并不是浏览器提供的，而是它自己内部所构建的，它同样具有event.stopPropagation、event.preventDefault这种常用的方法
Ref的应用
新的写法
myRef = React.createRef()
<div ref={this.myRef}></div>
访问this.myRef.current
import React, { Component } from 'react'
export default class App extends Component {
myref = React.createRef()
render() {
return (
<div>
<input ref='mytext'/>
<button onClick={()=>{this.handleClick()}}>add</button>
<input ref={this.myref}/>
<button onClick={()=>{this.handleClick2()}}>add2</button>
</div>
)
}
handleClick=()=>{
console.log('add1',this.refs.mytext.value)
}
handleClick2=()=>{
console.log('add2',this.myref.current.value)
}
}
组件的数据挂载方式
1. 状态(state)
状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
this.state是纯js对象，在Vue中，data属性是利用object.defineProperty处理过的，更改data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方式setState
import React, { Component } from 'react'
export default class App extends Component {
state = {
mytext: '收藏',
myShow:true
}
// constructor(){
// super()
// this.state={
// }
// }
render() {
return (
<div>
<h1>欢迎来到React开发</h1>
<button onClick={()=>this.handleClick()}>{this.state.myShow?"收藏":"取消收藏"}</button>
</div>
)
}
handleClick=()=>{
this.setState({
myShow:!this.state.myShow
})
}
}
列表渲染
import React, { Component } from 'react'
export default class App extends Component {
state={
list:['111','222','333','444']
}
render() {
return (
<div>
<ul >
{this.state.list.map((item,index)=><li key={index}>{item}--{index}</li>)}
</ul>
</div>
)
}
}
todolist
import React, { Component } from 'react'
export default class App extends Component {
myref = React.createRef()
state={
list:['aa','bb','cc']
}
render() {
return (
<div>
<h1>todolist</h1>
<input ref={this.myref}/>
<button onClick={()=>{this.handleClick()}}>add</button>
<ul>
{this.state.list.map((item,index)=><li key={index}>{item}--{index}--<button onClick={()=>this.handleDelClick(index)}>del</button></li>)}
</ul>
{!this.state.list.length?<div>暂无待办事项</div>:null}
</div>
)
}
handleClick=()=>{
console.log(this.myref.current.value)
// this.state.list.push(this.myref.current.value)
let newlist = [...this.state.list]
newlist.push(this.myref.current.value)
this.setState({
list:newlist
})
//清空字符串
this.myref.current.value =''
}
handleDelClick=(index)=>{
console.log(index)
let newlist = [...this.state.list]
newlist.splice(index,1)
this.setState({
list:newlist
})
}
}
