react之受控組件和非受控組件

react受控組件和非受控組件

代碼

受控組件

import React from 'react';
import './controll.scss';
export interface IControllProps {}
export interface IControllState {
  username: string;
  password: string;
}
export class Controll extends React.Component<IControllProps, IControllState> {
  state = {
    username: 'zengwe',
    password: '123456'
  }
  inputChange(val: any) {
    this.setState(val);
  }
  render() {
    return (
      <div>
        <div>
          username:<input type="text" value={this.state.username} onChange={(e) => { this.inputChange({username: e.target.value})}}/>
        </div>
        <div>
          password:<input value={this.state.password}  onChange={(e) => { this.inputChange({password: e.target.value})}}></input>
        </div>
        <div>
          username: {this.state.username}&nbsp;&nbsp;&nbsp;&nbsp;password: {this.state.password}
        </div>
      </div>
    );
  }
}

受控組件的input必須要通過input相關的事件去觸發state值的變更，然後再用setState來觸發dom的對比渲染

非受控組件

import React from 'react';
import './uncontroll.scss';
export interface IUncontrollProps {}
export interface IUncontrollState {}
export class Uncontroll extends React.Component<IUncontrollProps, IUncontrollState> {
  username: React.RefObject<HTMLInputElement>;
  constructor(props: IUncontrollProps, state: IUncontrollState) {
    super(props, state);
    this.username = React.createRef<HTMLInputElement>();
  }
  render() {
    return (
      <div>
        <div>
          username:<input type="text" ref={this.username}/>
        </div>
      </div>
    );
  }
}

    interface RefObject<T> {
        readonly current: T | null;
    }

通過ref來創建htmlInputElement的引用，就可以隨時獲取input的value，也可以使用ref來操作真實的DOM