react系列之react受控组件

受控组件:表单元素(input.textarea,selection)的值由React组件控制。

比如说:常见的场景:留言板上,使用react组件,通过操作setState()方法来修改input输入框的值,最后由state对象来保存变化后的值。

react官方也是推荐使用受控组件。总结下react组件更新state的整个流程:


可以通过初始化设置state的默认值;

每当表单值发生变化时,就要调用onchange方法处理事件

一定不能忘记在初始化的时候,把this指向事件调用对象。

通过this.setState设置数据, 事件处理拿到event改变后的状态,触发视图重新渲染

具体代码如下:

页面渲染:(虽然有点丑,没有去添加样式)


react组件是单向数据流,由代码可见,数据是在state中初始化出来的,通过props传值,使用handleChange()

方法,把新的表单数据又传回state.

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容