10 非受控组件以及受控与非受控的选择方案

含义

• 非受控组件：表单数据不受控与state的（未绑定value），使用React ref从DOM节点中获取表单数据的组件
• 提示refs弃用
  

class MyForm extends React.Component {
    constructor(props) {
        super(props)
    }
    submit = (e) => {
        e.preventDefault()
        console.log(this.refs.refName.value)
    }
    render() {
        return (
            <form onSubmit={this.submit}>
                <div>
                    用户名：<input type="text" ref="refName" placeholder="用户名" />
                </div>
                {/* onClick={this.submit} */}
                <div><button type="submit">提交</button></div>
            </form>
        )
    }
}
ReactDOM.render(
    <MyForm />,
    document.getElementById('app')
)

• 使用hooks React.createRef
• 打印this.refName
  

class MyForm extends React.Component {
    constructor(props) {
        super(props)
        this.refName = React.createRef()
        this.refGender = React.createRef()

        this.refIsStu = React.createRef()
        this.refLans = React.createRef()
    }
    submit = (e) => {
        e.preventDefault()
        // console.log(this.refs.refName.value)
        console.log(this.refGender.current.value)
    }
    render() {
        return (
            <form onSubmit={this.submit}>
                <div>
                    {/* ref="refName"  改用hooks React.createRef */}
                    用户名：<input type="text" placeholder="用户名" ref={this.refName} />
                </div>
                {/* onClick={this.submit} */}
                <div>
                    性别：
                    <select ref={this.refGender} defaultValue="male">
                        <option value="female">女</option>
                        <option value="male">男</option>
                    </select>
                </div>
                <div>
                    {/* radio checkbox不太适用于非受控组件 ref绑定*/}
                    <p>是否学生：
                        是<input type="radio" defaultChecked={true}/>
                        否<input type="radio" />
                    </p>
                    <p>掌握语言:
                        粤语<input type="checkbox" />
                        英语<input type="checkbox" defaultChecked={true} />
                    </p>
                </div>
                <div><button type="submit">提交</button></div>
            </form>
        )
    }
}
ReactDOM.render(
    <MyForm />,
    document.getElementById('app')
)

• 注意：只要使用了value就要绑定onChange事件or设置defaultValue
• defaultValue：form field的默认值，在组件挂载完毕后更新，不会导致DOM的更新