react——受控组件form基本使用

最新推荐文章于 2024-10-16 12:11:51 发布

原创最新推荐文章于 2024-10-16 12:11:51 发布 · 314 阅读

CC 4.0 BY-SA版权

本文详细介绍了React中受控组件的概念，并通过实例展示了如何在Form表单中应用受控组件，包括事件处理和状态管理，帮助开发者更好地理解和使用React的表单控件。

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    constructor(){
        super();
        this.state={
            username:""
        }
    }
    render() {
        return (
            <div>
                {/* 如果没有onSubmit，则会默认提交方式，我们通过设置onSubmit来设置提交方式 */}
                <form onSubmit={e=>this.hadleSubmit(e)}>
                    <label htmlFor="username">
                        用户：
                        <input type="text" 
                                id="username" 
                                // 这个方法是当输入一旦发生改变，便会触发此方法（方法内部设置更新state数据）
                                onChange={e=>this.uesrnamechange(e)}
                                //再将state中的数据传递给输入框value值
                                value={this.state.username}/>
                    </label>
                    <input type="submit" value="提交"/>
                </form>
            </div>
        )
    }
    hadleSubmit(event){
        // 阻止onsubmit的默认提交行为
        event.preventDefault();
        // 提交时，拿到最新的输入数据
        console.log(this.state.username)
    }
    uesrnamechange(event){
        // 当输入数据发生变化时，更新state中的数据
        this.setState({
            username:event.target.value
        })
    }
}