React.js——受控组件||非受控组件

区别

• 受控组件：需要为每一个组件动态的绑定state中的变量，并且需要为数据变化添加相应的事件处理函数。
• 非受控组件：则不需要为组件动态地绑定state中的变量，也不需要为数据变化添加事件处理函数，通过将数据交给React组件来实现为数据变化相应的事件处理函数。

非受控组件

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        //创建refs 将refs分配给实例属性
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert(this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
            

                
                    Name:
                    
                
                
            
        );
    }
}

受控组件

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: 'WJCHumble'}
        this.handleSubmit = this.handleSubmit.bind(this);
    }

	handleChange(event) {
		this.setState({value: event.target.value});
	}
    handleSubmit(event) {
        alert(this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            

                
                    Name:
                    
                
                
            
        );
    }
}