react学习(20)非受控组件

简介: react学习(20)非受控组件

知识点:
1:对于表单:form的action属性是用来标识表单要提交的地址,form有一个onsubmit原生事件,当点击按钮时,用于表单的提交。但是默认页面会刷新,所以需要阻止默认行为,在onsubmit中写一些逻辑。也可以给button绑定一个click事件做一些逻辑。
2:对于写action的默认是get方式,需要给输入dom的元素写上name属性,才会收集。

<script type="text/babel">
        class Login extends React.Component {
   
            handleSubmit=(event)=>{
   
                event.preventDefault();
                alert(`用户姓名:${
     this.username.value},用户密码:${
     this.password.value}`);
            }
            render(){
   
                return (
                    <form onSubmit={
   this.handleSubmit}>
                        用户姓名:<input type='text' name='username' ref={
   c=>this.username=c}/>
                        用户密码:<input type='password' name='password' ref={
   c=>this.password=c}/>
                        <button>提交</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('test'));
AI 代码解读

3:利用ref,使用的时候采取收集需要的值,就叫非受控组件。

目录
打赏
0
0
0
0
117
分享
相关文章
在 React 中使用高阶组件时,如何避免命名冲突?
在 React 中使用高阶组件时,如何避免命名冲突?
69 56
React 音频播放控制组件 Audio Controls
本文介绍了如何使用React构建音频播放控制组件,涵盖HTML5 `&lt;audio&gt;`标签和React组件化思想的基础知识。针对常见问题如播放状态管理、进度条更新不准确及跨浏览器兼容性,提供了详细的解决方案和代码示例。同时,还总结了易错点及避免方法,如确保音频加载完成再操作、处理音频错误等,帮助开发者实现稳定且功能强大的音频播放器。
33 11
React 音频进度条组件 Audio Progress Bar
在现代Web开发中,音频播放功能不可或缺。使用React构建音频进度条组件,不仅能实现播放控制和拖动跳转,还能确保代码的可维护性和复用性。本文介绍了如何利用HTML5 `&lt;audio&gt;`标签的基础功能、解决获取音频时长和当前时间的问题、动态更新进度条样式,并避免常见错误如忘记移除事件监听器和忽略跨浏览器兼容性。通过这些方法,开发者可以打造高质量的音频播放器,提升用户体验。
27 6
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
72 57
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
232 1
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?