zoukankan      html  css  js  c++  java
  • React:form

    表单控件:

    input

      文档在介绍控件之前,先提到了react组件自身的一个特点:状态由state掌控,改变组件状态只能用setState方法。

    而在html的表单里,input、radio、checkbox、select的值都是随用户输入改变的。

    要创建一个React的表单控件,也就是用React的方式创建表单组件:

    <label>
    Name:
    <input type="text" value={this.state.value} onChange={this.handleChange} />
    </label>

    在input控件中,value值就是一个状态state.value。当用户输入完成后,通过onChange事件调用setState改变state.value的值,从而让state.value与用户输入一致。此时,input不再是一个单纯的表单元素,而是一个React组件,可以有各种用户自定义行为。这和vue的v-model倒是很一致。一个组件就是一个实例,状态变量属于实例的(私有)属性,并能单向/双向绑定。

    textarea:

    在html中,textarea的初始值由其文本元素定义。

    在React中,用其value特性来表示。具体操作和input一样:

      <textarea value={this.state.value} onChange={this.handleChange} />

    select:

    1 <select>
    2   <option value="grapefruit">Grapefruit</option>
    3   <option value="lime">Lime</option>
    4   <option selected value="coconut">Coconut</option>
    5   <option value="mango">Mango</option>
    6 </select>

    在html中,select创建下拉菜单,在option中庸selected特性预选一个option。

    在React中,不适用selected特性,而是直接用value预定义某个选项的值。这使得对select的操作专注在value特性。

     1   //...
     2   constructor(props) {
     3     super(props);
     4     this.state = {value: 'coconut'};
     5 
     6     this.handleChange = this.handleChange.bind(this);
     7     this.handleSubmit = this.handleSubmit.bind(this);
     8   }
     9 //...
    10   <select value={this.state.value} onChange={this.handleChange}>
    11             <option value="grapefruit">Grapefruit</option>
    12             <option value="lime">Lime</option>
    13             <option value="coconut">Coconut</option>
    14             <option value="mango">Mango</option>
    15    </select>

    因此,对于input、textarea和select,我们只需要操作value即可。

    处理Multiple Inputs:

    文档给了一个针对多个表单控件的例程,我们可以通过判断控件的的name和type特性来处理:

    1   handleInputChange(event) {
    2     const target = event.target;
    3     const value = target.type === 'checkbox' ? target.checked : target.value;
    4     const name = target.name;
    5 
    6     this.setState({
    7       [name]: value
    8     });
    9   }

    此时,表单的状态就是表单的名值对,经过URI编码后可以post给后台。

    另一种替代方案:

      文档提到,如果我们嫌表单控件麻烦,可以用另一种形式的表单组件--Uncontrolled Components:

    意思是我们不必特意给form中的表单元素写处理程序,也不需要创建state变量。我们只需要写一个针对整个表单的处理程序,在用户submit的时候调用即可。其中,表单元素的value的输入用一个ref函数捕获:

     1   render() {
     2     return (
     3       <form onSubmit={this.handleSubmit}>
     4         <label>
     5           Name:
     6           <input type="text" ref={(input) => this.input = input} />
     7         </label>
     8         <input type="submit" value="Submit" />
     9       </form>
    10     );

    另外,Uncontrolled Components形式的表单中,为了给表单元素设置初始值,有一个defaultValue特性,在表单渲染的时候显示初始值。

    1         <input
    2           defaultValue="Bob"
    3           type="text"
    4           ref={(input) => this.input = input} />

     

  • 相关阅读:
    抓取到的网页写入数据库后是乱码的解决方法
    关于SecureCRT v7.0.2.418 安装、破解和修改
    负数的除法和取模运算(Python 2.7和C的比较)
    单模式匹配匹配算法
    Python解析网页工具:PyQuery
    asp.net json,对象,字符串的相互转换
    asp.net 后台 get,post请求
    查看局域网内所有IP
    MSSql性能优化
    js中对象复制以及apply方法的使用
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7467280.html
Copyright © 2011-2022 走看看