react表单数据提交

最新推荐文章于 2025-07-04 16:00:14 发布

杜杜的杜

最新推荐文章于 2025-07-04 16:00:14 发布

阅读量4.8k

点赞数

分类专栏： react

react 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用React构建的登录表单组件，演示了如何通过类组件管理状态，包括密码输入和表单提交的处理。文章详细展示了handleSubmit和handleChange方法的实现，以及如何在表单提交时显示用户名和密码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class LoginForm extends React.Component{
    constructor(props){
        super(props)
        this.state={
            pwd:''
        }
        this.handleSubmit=this.handleSubmit.bind(this)
        this.handleChange=this.handleChange.bind(this)
    }
    handleSubmit(event){
        event.preventDefault()
        const name=this.name.value
        const {pwd}=this.state
        alert(`准备提交的用户名为 ${name} ,密码为 ${pwd}`)
    }
    handleChange(event){
        const pwd=event.target.value
        this.setState({pwd})

    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                usrname: <input type='text' ref={input=>this.name=input}></input> <br/>
                paw: <input type='password' value={this.state.pwd} onChange={this.handleChange}></input> <br/>
                <input type='submit' value='login'/>
            </form>
        )
    }
}

es6 模板字符串的用法数字1前面的键