首页 > 其他分享 >基础篇——六、表单

基础篇——六、表单

时间:2022-10-22 16:05:02浏览次数:53  
标签:target 元素 基础 表单 React 组件 handleSubmit

六、表单

表单元素在React中自身维护一些状态,这些状态默认情况下是不受react控制的,这类状态不受react控制的表单元素称为非受控组件。

在React中,状态的修改必须通过组件的state,非受控组件有悖于这一原则,为了让表单元素的状态变更也能通过组件的state管理,React使用受控组件的技术达到这一目的。

1,受控组件

如果一个表单元素的值是由React来管理的,那么它就是一个受控组件。对于不同的表单元素,React的控制方法略有不同,常用的三类表单元素控制方式是:

①文本框

包含类型为text的input和textarea元素,它们受控的原理是:通过value属性设置表单元素的值,通过onChange时间监听值的变化,并将变化同步到React组件的state中:

class LoginForm extends Component {
    constructor() {
        this.state = {
            name: '',
            password: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e) {
        const target = e.target;
        this.setState({
            [target.name]: target.value
        })
    }
    handleSubmit(e) {
        e.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    用户名:
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
                </label>
                <label>
                    密码:
                    <input type="password" name="name" value={this.state.password} onChange={this.handleChange} />
                </label>
                <input type="submit" value="登录" />
            </form>
        )
    }
}
export default LoginForm;

②列表

React通过在select上定义value属性来决定哪一个option处于选中状态。

class LoginForm extends Component {
    constructor() {
        this.state = {
            value: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e) {
        const target = e.target;
        this.setState({
            value: target.value
        })
    }
    handleSubmit(e) {
        e.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    列表:
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="react">react</option>
                        <option value="redux">redux</option>
                    </select>
                </label>
                <input type="submit" value="登录" />
            </form>
        )
    }
}
export default LoginForm;

③复选框和单选框

React控制checked属性

class LoginForm extends Component {
    constructor() {
        this.state = {
            react: false,
            redux: false
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e) {
        const target = e.target;
        this.setState({
            [target.name]: target.checked
        })
    }
    handleSubmit(e) {
        e.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    react:
                    <input type="checkbox" name="react" value="react" checked={this.state.react} onChange={this.handleChange} />
                </label>
                <label>
                    redux:
                    <input type="checkbox" name="redux" value="redux" checked={this.state.redux} onChange={this.handleChange} />
                </label>
                <input type="submit" value="登录" />
            </form>
        )
    }
}
export default LoginForm;

2,,非受控组件

表单元素的状态依然由表单元素自己管理,React提供了一个特殊的属性ref,用来引用React组件或DOM元素的实例。

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(e) {
        console.log(this.input.value);
        e.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    title:
                    <input type="text" ref={(input) => this.input = input} />
                </label>
                <input type="submit" value="登录" />
            </form>
        )
    }
}
export default LoginForm;

ref的值是一个函数,接收当前元素作为参数,上述例子中input参数指向的是当前元素,把input赋值给this.input,进而可以在组件的其他地方通过this.input获取这个元素。

使用非受控组件时,常常需要为相应的表单元素设置默认值,但无法通过value设置,因为React无法控制表单元素的value属性,一旦在非受控组件中定义了value属性的值,就很难保证后续表单元素的值的正确性。这种情况下,我们可以使用defaultValue属性指定默认值:

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    title:
                    <input defaultValue="something" type="text" ref={(input) => this.input = input} />
                </label>
                <input type="submit" value="登录" />
            </form>
        )
    }

select元素和textarea元素也支持通过defaultValue设置默认值,checkbox和radio支持通过defaultChecked设置默认值。

非受控组件破坏了React对组件管理的一致性,往往容易出现不容易排查的问题,非特殊情况下,不使用。

标签:target,元素,基础,表单,React,组件,handleSubmit
From: https://www.cnblogs.com/sxww-zyt/p/16814452.html

相关文章

  • 基础篇——七,render新的返回类型
    七,render新的返回类型React16之前,render方法必须返回单个元素。现在,render支持两种新的返回类型:数组(有React元素组成)和字符串。render(){return[<likey="a">a......
  • 对于文件的相关基础操作的学习与总结
    String类在读写文件时,最不能忽略的是String数据类型的使用,那就先来说明一下String类型吧!1、charAt();2、compareTo();3、length();4、split();指定分割的份......
  • 595 CSS语法格式 and 596 CSS选择器_基础选择器
    CSS语法格式css语法:    格式:      选择器{         属性名1:属性值1;         属性名2:属性值2;         ...   ......
  • 列表,元组,字符串——数据类型三剑客【python启蒙】python基础的归类学习,内含思维导图
    〇引言  橘子们大家好,学完这一篇,可以说python最基本的知识就完结了。对大家来说是迈向新高的路途,对我来说,我也要去挑战更高难度的博客。我在深圳技术大学跟着OIC开源创......
  • Markdown基础语法教学
    Markdown语法简要介绍Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯它允许人们使用易读易写的纯文本格式编写文档,是一类用简单句法描述简单格式的文本语言由于Ma......
  • HTML标签-表单标签-概述
    HTML标签-表单标签-概述HTML标签:表单标签表单:概念:用于采集用户输入的数据的。用于和服务器进行交互。from:用于定义表单的。可以定义一个范围,范围......
  • java基础-->注释
    注释注释:注释起到对代码标注和解释的作用,如果你去看看JDK源码,会发现他们有许多的注释,而且注释是比代码还要多的,可见为代码添加注释是非常重要的,写好注释能让别人更加容易......
  • docker数据持久存储基础
    1、前言容器适用无状态的应用,容器运行时的数据分为两部分:镜像层和容器层。镜像层的数据是永久存储的,而容器的数据随着容器的停止也就消失。对于有状态的应用来说,没有持久......
  • 2022-2023-1 20221401 《计算机基础与程序设计》第八周学习总结
    2022-2023-120221401《计算机基础与程序设计》第八周学习总结作业信息班级链接https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业要求https://www......
  • 2022-2023-1 20221415 《计算机基础与程序设计》第八周学习总结
    2022-2023-120221415《计算机基础与程序设计》第六周学习总结作业信息这个作业属于哪个课程<班级的链接>(2022-2023-1-计算机基础与程序设计)这个作业要求在哪......