受控组件是什么

受控组件

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'xiebenyin'
    }
  }
  render() {
    return (
      <form>
        <input type="text" value={this.state.name} onChange={(e) => this.change(e)}/>
      </form>
    )
  }
  change(e) {
    this.setState({
      name: e.target.value
    })
  }
}

export default App;

•  input 值的来源是受  react 的  this.state 控制，属于受控组件

受控组件的一个小小技巧

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'xiebenyin',
      phone: '15997155938',
      email: 'xxx@qq.com',
    }
  }
  render() {
    return (
      <form>
        <input type="text" name={'name'} value={this.state.name} onChange={(e) => this.change(e)}/>
        <input type="text" name={'phone'} value={this.state.phone} onChange={(e) => this.change(e)}/>
        <input type="text" name={'email'} value={this.state.email} onChange={(e) => this.change(e)}/>
      </form>
    )
  }
  change(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
}

export default App;

• 给受控组件添加  name 属性，通过  e.target.name 来判断设置哪一个组件的  this.state 

非受控组件

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return (
      <form onSubmit={(e) => this.submit(e)}>
        <input ref={this.myRef} type="text"/>
        <input type="submit"/>
      </form>
    )
  }
  submit = (e) => {
    e.preventDefault(); // 阻止默认事件
    console.log(this.myRef.current.value);
  }
}

export default App;

• 元素  input 值的来源和去向不受  react 中的 this.state 控制，非受控组件
• 元素  input 值的来源或去向中的一个不受  react 中的  this.state 控制，也是非受控组件