zoukankan      html  css  js  c++  java
  • 受控组件

    受控组件

    import React, { Component } from 'react';
    
    class ControlledCompExample extends Component {
      constructor() {
        super();
        this.state = {
          fullName: ''
        }
      }
      handleFullNameChange = (e) => {
        this.setState({
          fullName: e.target.value
        })
      }
      handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.fullName)
      }
      render() {
        return (
          <div>
            <form onSubmit={this.handleSubmit}>
              <label htmlFor="fullName">Full Name</label>
              <input
                type="text"
                value={this.state.fullName}
                onChange={this.handleFullNameChange}
                name="fullName" />
              <input type="submit" value="Submit" />
            </form>
          </div>
        );
      }
    }

    以上关键的地方在于:

      state中设置表单的初始状态,当表单设置onChange,onChange中获取合成事件,通过evt.target.value把表单的值通过setState触发渲染,显示到界面上。

      受控组件顾名思义,组件的状态受到控制,state与界面上显示的值时刻保持双向绑定。优点是方便校验(在onChange中),缺点是太臃肿。如果不需要监视表单的值,不需要实时校验,就使用非受控组件

      如果不设置onChange,则界面上看不到我们输入的东西,即一直输入,但输入框总是空白的。因为value属性一直没发生变化(没有在onChange中对state进行更新)

    非受控组件

    通过ref获取表单的dom对象,再从中取值。下面通过ref将input的dom添加到this上:

    <input
      type="text"
      ref={input => this.fullName = input} />

    接着获取值:

    this.fullName.value

     

  • 相关阅读:
    数据库——Oracle(7)
    数据库——Oracle(6)
    数据库——Oracle(5)
    数据库——Oracle(4)
    数据库——Oracle(3)
    数据库——Oracle(2)
    Java 学习笔记之 Synchronized锁对象
    Java 学习笔记之 线程安全
    Java 学习笔记之 实例变量非线程安全
    Java 学习笔记之 方法内的临时变量是线程安全
  • 原文地址:https://www.cnblogs.com/hellohello/p/8085544.html
Copyright © 2011-2022 走看看