react——受控组件form为多个输入时，简化方法的写法

最新推荐文章于 2024-09-19 11:29:15 发布

原创最新推荐文章于 2024-09-19 11:29:15 发布 · 446 阅读

CC 4.0 BY-SA版权

本文介绍了如何在React中处理具有多个输入的受控组件表单，提供了一种简化的方法来管理表单状态和输入值。通过集中处理onChange事件，可以有效地减少代码冗余，提高代码可维护性。

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    constructor(){
        super();
        this.state={
            username:"",
            password:"",
            valid:""
        }
    }
    render() {
        return (
            <div>
                <form onSubmit={e=>this.formSubmit(e)}>
                    <div>
                        用户名：<input type="text" 
                                name="username" 
                                value={this.state.username}
                                onChange={e=>this.changeContent(e)}/>
                    </div> 
                    <div>
                        密码：<input type="text" 
                                    name="password" 
                                    value={this.state.password}
                                    onChange={e=>this.changeContent(e)}/>
                    </div>
                    <div>
                        验证码：<input type="text" 
                                        name="valid" 
                                        value={this.state.valid}
                                        onChange={e=>this.changeContent(e)}/>
                    </div>  
                    <button type="submit">点击提交</button>
                </form>
            </div>
        )
    }
    formSubmit(event){
        event.preventDefault();
        const{username,password,valid}=this.state;
        console.log(username,password,valid);
    }
    changeContent(event){
        this.setState({
            [event.target.name]:event.target.value
        })
    }
}