React从入门到精通系列之(15)不可控组件

十五、不可控组件

在大多数情况下，我们建议使用可控组件(参考本系列第9篇《表单处理》》)来实现表单功能。 在可控组件中，表单数据由React组件处理。 替代方法是使用不可控组件，其中表单数据是由DOM本身处理。

要编写不可控组件，不需要为每个状态更新都去编写事件处理程序，你可以直接使用ref从DOM获取表单值。

例如，此代码在不可控组件中接受一个name：

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this)
    }
    submit(e) {
        e.preventDefault();
        console.log('有一个name提交了：',this.input.value);
    }
    render() {
        return (
            <form onSubmit={this.submit}>
                <label>
                    Name:
                    <input type="text" ref={input => { this.input = input; }} />
                </label>
                <input type="submit" value="submit" />
            </form>
        );
    }
}

由于不可控组件在DOM中保持『真实的唯一来源』，因此当使用不可控组件时，有时更容易集成React和非React代码。 如果你想要快速创建并且不顾代码质量的话，它也可以稍微少写一些代码。 否则，通常都应该使用受控组件。

如果仍然不清楚在特定的情况下应该使用哪种类型(受控组件/不受控组件)的组件，您可能会发现这篇文章中的控制输入和不可控输入对加深你的理解是很有帮助的。

默认值

在React渲染生命周期中，表单元素的value属性将覆盖DOM中的值。 对于不可控组件，您通常希望React指定初始值，但不去控制DOM的后续更新。 要处理这种情况，可以指定defaultValue属性，而不是value。

render() {
    return (
        <form onSubmit={this.submit}>
            <label>
                Name:
                <input defaultValue="zhangyatao" type="text"
                    ref={input => { this.input = input; }} />
            </label>
            <input type="submit" value="submit" />
        </form>
    );
}

同样，<input type =“checkbox”>和<input type =“radio”>支持defaultChecked，并且<select>也同样支持defaultValue。