react.js受控组件和非受控组件

最新推荐文章于 2025-07-01 09:13:19 发布

原创最新推荐文章于 2025-07-01 09:13:19 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了React中受控和非受控组件的区别，受控组件将表单元素的值与状态绑定，而非受控组件则不进行绑定。通过代码示例详细解释了两种写法，并展示了如何在React应用中使用这两种不同的组件。

受控和非受控即表单元素的值是否与状态绑定

受控=>与状态绑定
非受控=>与状态不绑定

非受控写法：

import React, { Component } from 'react'

export default class index extends Component {
    handleSnbmit() {
        console.log(this.refs.username.value)
        console.log(this.refs.password.value)
    }
    render() {
        return (
            <form action="###">
                <div className="item">
                    <label>用户名</label>
                    <input ref="username" />
                </div>
                <div className="item">
                    <label>密码：</label>
                    <input ref="password" />
                </div>
            </form>
        )
    }
}

受控写法：

import React, { Component } from 'react'

export default class home extends Component {
    state={
        // 第一步
        username:'1234',
        password:'123'
    }
    handleSnbmit() {
        console.log(this.state)
    }
    render() {
        return (
            <form action="###">
            <div className="item">
                <label>用户名</label>
                {/* 第二步：必须提供onChang事件 */}
                <input value={this.state.username} onChange={(ev)=>this.setState({
                    username:ev.target.value
                })} />
            </div>
            <div className="item">
                <label>密码：</label>
                <input ref="password" />
            </div>
        </form>
        )
    }
}