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

一、不可控组件

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

如上：defaultvalue的值是固定的，这就是一个不可控组件

如果要获取input的value值，只有使用ref获取节点来获取值

二、可控组件

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

如上：defaultvalue的值是根据状态确定的，只需要拿到this.state.value的值就可以了，

这里需要注意一下：使用value的值是不可以修改的，defaultValue的值是可以修改的

三、可控组件的优点

1、符合React的数据流

2、数据存储在state中，便于获取

3、便于处理数据

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;