15、react之 可控组件与不可控组件

import React from 'react';
import ReactDOM from 'react-dom';

// 不可控组建，要是使用refs属性对DOM节点进行操作
class UnControll extends React.Component {
    submitData = (e)=> {
        var userInput1 = ReactDOM.findDOMNode(this.refs.userInput1).value;
        var userInput2 = ReactDOM.findDOMNode(this.refs.userInput2).value;
        alert(userInput1);
        alert(userInput2)
        e.preventDefault();
    }
    render(){
        return (
            

                {/*
                    在表单中，使用value是无法改变的，需要使用defaultValue
                    checked与defaultChecked同上
                */}
                
                
                提交
            
        )
    }
}

// 可控组建,不需要对DOM进行操作
class Controll extends React.Component {
    state = { value:'可控组件' }
    submitData = (e)=> {
        alert(this.state.value);
        e.preventDefault();
    }
    handleChange = (e)=>{
        this.setState({
            value:e.target.value
        })
    }
    render() {
        return (
            

                
                提交
            
        );
    }
}

export default Controll;

// export default UnControll;