3.组件的基本用法

目录

1  创建组件

1.1  用函数创建组件

1.2  使用类创建组件

2  项目上组件的使用方式

3  事件处理

3.1  事件绑定

3.1.1  类组件绑定事件

3.1.2  函数组件绑定事件

3.2  事件对象

4  组件状态

4.1  初始化状态

4.2  获取状态

4.3  设置状态

4.3.1  箭头函数

4.3.2  重新绑定this

5  表单处理

5.1  受控组件

5.1.1  input

5.1.2  textarea

5.1.3  select

5.1.4  checkbox

5.1.5  多表单元素优化

5.2  非受控组件

6  发表评论案例

---

1  创建组件

1.1  用函数创建组件

创建组件的函数名称必须以大写字母开头，小写会报错导致不能成功渲染，原因是你发现html的标签首字母都是小写的，你自定义组件用大写有个区分

创建组件的函数必须有返回值，不写不行，至少要写成 return null 才不会报错

定义的时候把jsx写在return中，用的使用使用以函数名相同的标签就行了，我下面的是双标签，你也可以使用单标签

一般来讲我们不会使用箭头函数作为创建组件的函数，但箭头函数可以创建组件

1.2  使用类创建组件

用关键字class定义一个类 My_components 用关键字extends继承 React.Component

• 自定义组件需要以大写字母开头
• 需要有render()，render()中需要有return

2  项目上组件的使用方式

一般来讲每一个组件都会独占一个JS文件，之后会有一个文件夹放所有的组件JS文件，我们下面做个例子

首先在src中创建一个文件夹Components，然后在Components中创建一个JS文件，这个JS文件的名字就是组件的名字

之后在My_components.js中创建组件，然后导出

之后进入index.js，引用后就可以渲染了

用函数定义的组件也可以像上面一样导出，index.js代码不变

3  事件处理

3.1  事件绑定

3.1.1  类组件绑定事件

• this.something就是上面定义的something函数，如果你直接在onClick后的大括号中写console.log(1)，那么在运行一开始就会被执行，且后面再点击是无效的
• React事件采用驼峰命名法，onClick是点击事件，onMouseEnter是鼠标移动到元素上触发的事件

按照上面的代码后点击了3次，发现可以成功绑定事件

3.1.2  函数组件绑定事件

打开后点了三下

3.2  事件对象

React中的事件对象叫做合成事件或合成事件对象，可以兼容所有浏览器

给事件处理函数一个形参就可以拿到事件对象

用法和原生JS的事件对象用法相似，比如可以获取 pageX.pageY,e.preventDefault()可以阻止浏览器的默认行为(比如a标签的跳转页面)

4  组件状态

用函数创建的组件叫无状态组件，用类创建的组件叫有状态组件，状态（state）就是数据，比如说组件是否被勾选了这种就叫状态。

当我们只需要展示数据的时候我们用函数组件，需要交互的时候我们用类组件

我们通过 state 获取状态，通过 setState() 设置状态，state的值是对象，其中包含多组键值对，这些键值对在默认情况下只能在组件内部使用（通过组件通讯可以给其他的组件使用）

4.1  初始化状态

我们可以这样初始化state，其中constructor(),super(),this.state的名称都是固定的，count及后面的值是自定义的

也可以这样初始化state，一般来讲会用下面这种，写起来比较方便

4.2  获取状态

可以使用this.state拿到状态，我们搞一下看看

4.3  设置状态

不能直接操作this.state.count，比如用等于号进行赋值，对列表push这些操作，直接进行这些操作会报错。想要设置状态要使用this.setState()进行修改

设置状态后会对组件的渲染结果产生影响，如果我们想改变组件的一些内容，我们只需要对state进行修改就可以了

这样写会有this的指向问题

点击按钮后会报错，报错的原因是不能读取 undefined属性的setState属性，也就是说此时在add_one()中的this是undefined

可以用下面两种方法解决this指向的问题

4.3.1  箭头函数

箭头函数自身不绑定this，如果写了this默认为箭头函数外一层的this，也就是你定义的组件

点三下发现没问题，既改变了state中的count，又更新了UI

也可以这样写，这样写的this指向的是render()的this，render()的this就是组件的this

还可以这样写，这样写就给this传进来了，this就不再是undefined了

4.3.2  重新绑定this

也可以对this进行重新绑定

重新绑定后可以正常使用了

5  表单处理

5.1  受控组件

5.1.1  input

定义一个状态的变量something，然后把原本的value交给这个变量something来管理，之后定义onChange事件，每一次输入框内容改变的时候都会将文本框中的内容赋值给变量something

• something是自定义的变量，名称自定
• 调整完上面说的后，此时input受React控制，我们称input为受控组件

5.1.2  textarea

textarea除了改了个标签名，剩下没有变化

5.1.3  select

select有一些区别

由于我们给了默认值，所以刚打开页面的时候，就会以默认值渲染

选择其他选项后点击按钮可以正常获取信息

5.1.4  checkbox

checkbox需要将value改成checked，变量定为布尔量

打开后会渲染指定的状态

也可以获取目前的状态

5.1.5  多表单元素优化

每用一个表单元素都得需要一个变量存储状态的值，再加上一个处理程序修改值，那样会有很多个处理程序，很麻烦

我们简单做个判断，如果类型是checkbox就拿checked属性，如果不是就拿value属性，然后给每一个表单元素一个name，name与state中的状态名称相同

点击按钮后可以获取当前状态

5.2  非受控组件

这种方式不常用，看别人写了能懂就行

使用ref对象，ref全称是reference，React中的ref对象是操作DOM用的

6  发表评论案例

打开是这样的

输入评论人和评论内容后点击发表可以把内容显示在下面

全部代码 

class My_components extends React.Component {
    state = {
        username:"",
        remark:"",
        remark_list:[],
        // remark_list:[{username:1,remark:2,remark_id:0},{username:1,remark:3,remark_id:1}],
        remark_id:""
    }

    publish_remark = ()=>{
        if (this.state.username.trim() && this.state.remark.trim()) {
            this.setState({remark_id : this.state.remark_list.length},() => {
                const new_remark_list = [{...this.state,remark_id:this.state.remark_id},...this.state.remark_list]
                this.setState({remark_list : new_remark_list,username : "",remark : ""})
            })
        }
    }

    form_change = (e) => {
        const value = e.target.type==='checkbox'?e.target.checked:e.target.value
        this.setState({[e.target.name]:value})
    }

    load_remark = () => {
        if (this.state.remark_list.length === 0) {
            return <div>暂无评论，快去评论吧~</div>
        }
        else {
            return (
            <ul>
                {this.state.remark_list.map(item => <li key={item.remark_id}>评论人:{item.username} 评论内容:{item.remark}</li>)}
            </ul>
            ) 
        }
    }

    render() {
        return (
            <div>
                <input type="value" placeholder= "请输入评论人" name='username' value={this.state.username} onChange={this.form_change}></input>
                <br></br>
                <textarea placeholder= "清输入评论内容" name='remark' value={this.state.remark} onChange={this.form_change}></textarea>
                <br></br>
                <button onClick={this.publish_remark}>发表评论</button>
                {this.load_remark()}
            </div>
        )
    }
}

ReactDOM.createRoot(document.querySelector('div')).render(<My_components></My_components>)

这里的这个地方是一个回调函数，在JS中执行顺序与书写顺序不一定一致，我需要首先定义一个id，然后再给id，所以定义id一定在给id的代码之前

由于不能对状态直接进行操作，所以我们要新搞一个变量 new_remark_list 来覆盖掉之前的 remark_list

其中三个点的意思是继承指定变量的所有内容，这三个点可以用于对象也可以用于列表，如果用于列表可以选择将之前的内容放在前面还是放在后面，我下面的图是放在后面，如果写 [...this.state.remark_list,{...this.state,remark_id:this.state.remark_id}] 就是将之前的内容放在新列表的前面

可以直接返回html标签，然后在render()中直接使用函数进行渲染