react的受控组件、非受控组件ref

今天药忘吃喽~ 2022-03-28 04:19 227阅读 0赞

import React from 'react'
    export default class CommentBox extends React.Component {
        constructor(props) {
            super(props)
            // 受控组件改为非受控组件
            // this.state = {
            //     value: ''
            // }
        }
        // handleChange(event) {
        //     this.setState({
        //         value: event.target.value
        //     })
        // }
        handleSubmit(event){
            // alert(this.state.value);
            alert(this.textInput.value)
            event.prevenDefault()  //禁止form提交跳转
        }
        render() {
            return (
                <form className="p-5" onSubmit={(event)=>{this.handleSubmit(event)}}>
                    <div className="form-group">
                        <label htmlFor="">留言内容</label>
                        <input type='text' className='form-control' 
                        // onChange={(event)=>{this.handleChange(event)}} 
                        // value={this.state.value}
                        ref={(textInput)=>{this.textInput=textInput}}
                        placeholder='请输入内容' >
                        </input>
                    </div>
                    <button type='submit' className='btn btn-primary'>留言</button>
                </form>
            )
        }
    }

ref 是 js 属性   参数为dom节点

非受控组件虽然可以建议代码量，但是还是建议使用受控组件，

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记十五、React中的非受控组件和受控组件

组件内部维护state，state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程中表单发...

灰太狼/ 2024年05月01日 16:23/ 0 赞/ 52 阅读

相关 React中的受控组件（controlled component）和非受控组件（uncontrolled component）

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

叁歲伎倆/ 2024年02月20日 08:30/ 0 赞/ 44 阅读

相关 React中的受控组件（controlled component）和非受控组件（uncontrolled component）

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 组件 ⭐ 写在最后 -------------------- ⭐ 专栏简介前端入门之旅：探索We

曾经终败给现在/ 2023年10月16日 13:52/ 0 赞/ 37 阅读

相关 reactjs受控组件和非受控组件

非受控组件通过使用ref属性获取值。 ![在这里插入图片描述][39ab7454698d44ad862cf6f07d30c35e.png_pic_center]

╰+攻爆jí腚メ/ 2023年09月28日 16:50/ 0 赞/ 103 阅读

相关 React-受控组件

所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常

港控/mmm°/ 2023年07月04日 15:46/ 0 赞/ 116 阅读

相关 React 非受控表单组件

表单元素不采用value-onChange/checked-onChange方式来对state区中的数据进行双向绑定，我们就说表单元素是非受控表单元素。非受控表单元素需要

拼搏现实的明天。/ 2023年01月02日 03:26/ 0 赞/ 186 阅读

相关 React学习笔记四——受控组件和非受控组件

受控组件页面中所有输入类的DOM，随着输入的值同步的维护到状态中，如需要使用时，直接从状态中获取推荐使用受控组件，可以避免对ref的使用受控组件案例普

雨点打透心脏的1/2处/ 2022年10月09日 06:23/ 0 赞/ 168 阅读

相关 react的受控组件、非受控组件ref

import React from 'react' export default class CommentBox extends React.Componen

今天药忘吃喽~/ 2022年03月28日 04:19/ 0 赞/ 228 阅读

相关受控组件与非受控组件

文章目录受控组件更新state的流程例子非受控组件例子受控组件所谓受控组件就是每当表单的状态发生变

妖狐艹你老母/ 2021年12月12日 23:57/ 0 赞/ 273 阅读

相关 react系列（14）受控组件与非受控组件

受控组件在<input>这类表单元素中，当用户修改输入数据，表单会自动将其赋值到value属性中，这称为HTML元素维持了自身状态。但在react开发中，我们应尽可能的

雨点打透心脏的1/2处/ 2021年09月16日 22:54/ 0 赞/ 297 阅读