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 (
            <form onSubmit={this.submitData}>
                {/*
                    在表單中，使用value是無法改變的，需要使用defaultValue
                    checked與defaultChecked同上
                */}
                <input
                    type="text"
                    value="不可控元件"
                    ref="userInput1"
                />
                <input
                    type="text"
                    defaultValue="不可控元件"
                    ref="userInput2"
                />
                <button>提交</button>
            </form>
        )
    }
}

// 可控組建,不需要對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 (
            <form onSubmit={this.submitData}>
                <input
                    type="text"
                    defaultValue={this.state.value}
                    onChange={this.handleChange}
                />
                <button>提交</button>
            </form>
        );
    }
}

export default Controll;

// export default UnControll;