持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
上一篇文章中我们介绍React中事件绑定this指向问题的两种解决方法以及受控组件及其使用步骤，接下来将介绍受控组件在表单里面的应用以及非受控组件的使用方法和使用步骤
- 受控组件多表单元素优化的步骤
- 给表单元素添加name属性，名称与state相同
- 根据表单元素类型获取对应值
- 在change事件处理程序中通过[name]来修改对应的state
- 示例代码如下所示：
<input
type="text"
name="txt"
value-(this.state.t
onchange=(this.handleForm)
/>
//根据表单元素类型获取值
const value target.type ==='checkbox'
？target.checked
target.value
//根据name设置对应state
this.setstate({
[name]:value
)
- 非受控组件
- 说明：借助于ref,使用原生DOM方式来获取表单元素值
- ref的作用：获取DOM或组件
- 使用步骤：
1.调用React.createRef0方法创建一个ref对象，示例代码如下所示：
constructor ()
super()
this.txtRef React.createRef (
}
- 将创建好的ref对象添加到文本框中，代码如下所示
<input type="text"ref=(this.txtRef}/>
- 通过ref对象获取到文本框的值
Console.log (this.txtRef.,current.value)
React组件基础的总结：
- 组件的两种创建方式：函数组件和类组件
- 无状态（函数）组件，负责静态结构展示
- 有状态（类）组件，负责更新UI，让页面动起来
- 绑定事件注意ths指向问题
- 推荐使用受控组件来处理表单
- 完全利用JS语言的能力创建组件，这是React的思想
以上就是React中有关于组件使用的一些知识点了，接下来将会介绍组件之间通讯的方式
