react--受控组件与非受控组件

受控组件与非受控组件

表单元素它的值来自于state 这个组件就是受控组件，否则就是非受控组件

受控组件：在HTML中，表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

class App extends React.Component{
    constructor(props){
        super(props);
        this.state={
        	n:1
        }
    }
    change=(e)=>{
        this.setState({
        	n: e.target.value
        })
    }
    render(){
        return (
            <div>
            	<input value={this.state.n} onChange={this.change} />									{this.state.n}
            </div>
           )
     }
 }
 ReactDOM.render(<App />,document.getElementById("box"));

非受控组件：这时表单数据将交由 DOM 节点来处理。

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

class App extends React.Component{
    constructor(props){
    	super(props);
    }
    handleSubmit = e=>{
    	e.preventDefault();
    }
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                	<input type="text" ref={el=>this.input=el} />
                </label>
                <input type="submit" value="Submit" />
            </form>
         )
      }
 }
 ReactDOM.render(<App />,document.getElementById("box"));