脚本宝典收集整理的这篇文章主要介绍了

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过