React之受控组件与非受控组件

受控组件
假设我们现在有一个表单，表单中有一个input标签，input的value值必须是我们设置在constructor构造函数的state中的值，然后，通过onChange触发事件来改变state中保存的value值，这样形成一个循环的回路影响。也可以说是React负责渲染表单的组件仍然控制用户后续输入时所发生的变化

class Combox extends React.Component {
    constructor() {
        super()
        this.state={
            user:'',
            text:''
        }
    }
    //通过onChange触发事件来改变state中保存的value值
    inputChange=(e)=>{
        const key=e.currentTarget.id
        this.setState({
            [key]:e.currentTarget.value
        })
    }
    render(){
        return(
            <div>
                <div>
                    <label htmlFor="user">评论人：</label>
                    //input的value值必须是我们设置在constructor构造函数的state中的值
                    <input id='user' value={this.state.user} onChange={this.inputChange}></input>
                </div>
                <div>
                    <label htmlFor="text">评论内容：</label>
                     //input的value值必须是我们设置在constructor构造函数的state中的值
                    <input id='text' value={this.state.text}  onChange={this.inputChange}></input> 
                </div>
                <button onClick={()=>this.listChange()}>提交</button>            
            </div>
        )
    }
}

非受控组件：通过创建一个ref引用，表单数据交给dom来处理

class Combox extends React.Component {
    constructor() {
        super()
        this.state={
            user:'',
            text:''
        }
        //第一步：创建ref引用
        this.userValue=React.createRef()
        this.textValue=React.createRef()
    }
    //提交更新数据
    listChange=()=>{
        if(this.userValue.current.value&&this.textValue.current.value){
                this.props.updateList({//updateList（）和本题无关
                /第三步：使用，可以引用赋值了
                    name:this.userValue.current.value,
                    text:this.textValue.current.value
                })
                this.userValue.current.value=this.textValue.current.value=''
        }    
        
    }
    render(){
        return(
            <div>
                <div>
                    <label htmlFor="user">评论人：</label>
                    //第二部：使用创建好得ref
                    <input id='user'  ref={this.userValue}></input>
                </div>
                <div>
                    <label htmlFor="text">评论内容：</label>
                    <input id='text'   ref={this.textValue}></input> 
                </div>
                <button onClick={()=>this.listChange()}>提交</button>            
            </div>
        )
    }
}