0
点赞
收藏
分享

微信扫一扫

❤ React04-React 组件基础

❤ React04-React 组件基础

1、组件化开发介绍

组件化开发思想:分而治之 image.png

异步组件-高阶组件

组件包含: image.png

组件特点 可复用、独立、可组合

2、组件化创建的两种方式

(1)函数创建组件---无状态组件 使用JS函数(或者箭头函数)创建的组件 名称以答谢字母开头 函数必须有返回值,表示该组件的结构 渲染函数组件:用函数名作为组件标签名 可以是单标签或者双标签

(2)class创建组件---有状态组件 image.png

image.png

(3) 抽离为JS文件 image.png image.png

导入和渲染

image.png

3、组件事件处理

1 事件绑定 image.png

2事件对象 image.png

3 有状态组件(类组件)和无状态组件(函数组件) image.png

4 组件的state和setState

image.png

5 组件state

image.png

6 setState修改状态

image.png

7 从JSX之中抽离逻辑代码

image.png

事件绑定this指向的转换(三种)

(1) 箭头函数

箭头函数自身不绑定this

(2) Function.prototype.bind()

利用ES中的bind方法,将事件处理程序中的this与组件事例绑定到一起

image.png

image.png

(3) class的事例方法

image.png

image.png

8 表单绑定

受控组件

image.png

image.png

image.png

demo (输入框、文本框、富文本框、下拉框)


import React from 'react';
class Hrllo extends React.Component{
    state = {
        count:0,
        txt:'11',
        textarea:'富文本框',
        city:'bg',
        ischecked:false,

    }
    handleTxtx=e=>{
        console.log('你刚刚点击了'+e.target);
        this.setState({
            txt:e.target.value,
        }) 
        console.log(this.state.txt)
    }
    handleTextarea=e=>{
        console.log('你刚刚点击了'+e.target);
        this.setState({
            textarea:e.target.value,
        }) 
        console.log(this.state.textarea)
    }
    handleCity=e=>{
        console.log('你刚刚点击了'+e.target);
        this.setState({
            city:e.target.value,
        }) 
        console.log(this.state.city)
    }
    handleChecked=e=>{
        console.log('你刚刚点击了'+e.target);
        this.setState({
            ischecked:e.target.checked,
        }) 
        console.log(this.state.ischecked)
    }
    render() {
        return (
            <div>
                {/* 输入框 */}
                <div>
                    <input value={this.state.txt} name="txt" 
                    onChange={this.handleTxtx}></input>
                </div>
                {/* 复选框 */}
                <div>
                    <textarea value={this.state.textarea} 
                    onChange={this.handleTextarea}></textarea>
                </div>
                {/* 单选框 */}
                <select value={this.state.city} onChange={this.handleCity}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="cd">成都</option>
                </select>
                {/* 复选框 */}
                <input type="checkbox" checked={this.state.ischecked} onChange={this.handleChecked}>


                </input>
            </div> 
            )
    }
}
export default Hrllo

受控组件的优化

image.png


import React from 'react';
class Hrllo extends React.Component{
    state = {
        count:0,
        txt:'11',
        textarea:'富文本框',
        city:'bg',
        ischecked:false,

    }
    handleChange=e=>{
        const target=e.target;
        const value=target.type === 'checkbox'
        ?target.checked
        :target.value;

        const name=target.name;

        console.log('你刚刚点击了'+e.target);
        this.setState({
           [name]:value,
        }) 
        console.log(this.state)
    }
    
    render() {
        return (
            <div>
                {/* 输入框 */}
                <div>
                    <input value={this.state.txt} name="txt" 
                    onChange={this.handleChange}></input>
                </div>
                {/* 复选框 */}
                <div>
                    <textarea value={this.state.textarea} name="textarea" 
                    onChange={this.handleChange}></textarea>
                </div>
                {/* 单选框 */}
                <select value={this.state.city} onChange={this.handleChange} name="city" >
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="cd">成都</option>
                </select>
                {/* 复选框 */}
                <input type="checkbox" checked={this.state.ischecked} name="ischecked" 
                onChange={this.handleChange}>


                </input>
            </div> 
            )
    }
}
export default Hrllo

非受控组件(DOM方式)

image.png

image.png


// 非受控组件
import React from 'react';
class Hrllo extends React.Component{
    constructor(){
        super()
        this.txtref=React.createRef(); 
    }
   getTxt=()=>{
    console.log('文本框架的值'+this.txtref.current.value);
   }
    render() {
        return (
            <div>
                {/* 输入框 */}
                <input type="text" ref={this.txtref}/>
                <button onClick={this.getTxt}>获取文本框的值</button>
            </div> 
            )
    }
}
export default Hrllo
 

 



9 组件部分小案例:

评论列表:

image.png

报错:非大写字母开头

image.png

举报

相关推荐

0 条评论