react--组件中收集表单数据

首先我们先了解一个概念：受控组件和非受控组件

受控组件：在 HTML 中，表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

例如：我们提交时获取到输入的值：

export default class Login extends Component{
	constructor(props){
		super(props);
		this.state={
			value:''	
		}
		this.handleChange = this.handleChange.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);
	}
	handleChange(event){
		this.setState({value:event.target.value})
	}
	handleSubmit(event){
		alert("名字："+this.state.value)
		event.proventDefault();//阻止事件的默认行为(提交)
	}
	render(){
		return(
			<form>
				<lable>
					名字：
					<input type="text" value={this.state.value} onChange={this.handleChange}/>
				</lable>
				<input type="submit" value="提交" onSubmit={this.handleSubmit}/>
			<form />
		)
	}
}

非受控组件：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，可以使用 ref 来从 DOM 节点中获取表单数据。

export default class Login extends Component{
    constructor(props){
        super(props);
        this.sub = this.sub.bind(this);
    }
    sub(event){
        //阻止事件的默认行为(提交)
        event.preventDefault();
        const username = this.userName.value;
        const number = Math.ceil(Math.random()*100);
        const password = this.passWord.value!==""?md5(this.passWord.value+number):"";
        
        console.log(username,password);
    }
    render(){
        return(
            <div className="center">
                <Form  className="login-form">
                    <input  type="text" placeholder="请输入账号"  ref={value => this.userName=value}/>
                    <input  type="password" placeholder="请输入密码"  ref={value => this.passWord=value} />
                    <div className="buttons">
                        <div onClick={this.sub}>登录</div>
                    </div>
                </Form>
            </div>
        )
    }
}