<input type="text" defaultvalue="Hello React" />

 <input type="text" defaultvalue={this.state.value} />

 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;