React 受控组件和非受控组件

1.受控组件的基本使用

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。 而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们将两者结合起来，使React的state成为“唯一数据源”； p 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；

被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”；

import React, { PureComponent } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      username: ""
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="username">
            {/* 这个就是一个受控组件 */}
            用户:<input
              type="text"
              id="username"
              onChange={e => this.handleChange(e)}
              value={this.state.username}
            />
          </label>

          <input type="submit" value="提交" />
        </form>
      </div>
    );
  }
  // 阻止表单的默认提交事件
  handleSubmit(e) {
    console.log(e)
    e.preventDefault() // 取消默认提交
  }

  handleChange(e) {
    console.log(e.target.value)
    this.setState({
      username: e.target.value
    })
  }
}
export default App;

实际截图:

image.png

受控组件-多个输入的情况

import React, { PureComponent } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      username: "",
      password: "",
      valid: ""
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="username">
            用户: <input
              type="text"
              id="username"
              onChange={e => this.handleUsernameChange(e)}
              value={this.state.username}
            />
          </label><br />
          <label htmlFor="password">
            密码: <input
              type="text"
              id="password"
              onChange={e => this.handlePasswordChange(e)}
              value={this.state.password}
            />
          </label><br />
          <label htmlFor="valid">
            验证: <input
              type="text"
              id="valid"
              onChange={e => this.handleValidChange(e)}
              value={this.state.valid}
            />
          </label>
          <input type="submit" value="提交" />
        </form>


      
  /**这个是原始获取 Start**/
  handleSubmit(e) {
    e.preventDefault()
    const { username, password, valid } = this.state
    console.log(username, password, valid);

  }
  handleUsernameChange(e) {
    this.setState({
      username: e.target.value
    })
  }
  handlePasswordChange(e) {
    this.setState({
      password: e.target.value
    })
  }
  handleValidChange(e) {
    this.setState({
      valid: e.target.value
    })
  }

  /**这个是原始获取 End**/
}

export default App;

优化代码:

  <div style={{ marginTop: '100px' }}></div>
        {/* 以下是优化的代码 */}
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="username">
            用户: <input
              type="text"
              id="username"
              name="username"
              onChange={e => this.HandelChange(e)}
              value={this.state.username}
            />
          </label><br />
          <label htmlFor="password">
            密码: <input
              type="text"
              id="password"
              name="password"
              onChange={e => this.HandelChange(e)}
              value={this.state.password}
            />
          </label><br />
          <label htmlFor="valid">
            验证: <input
              type="text"
              id="valid"
              name="valid"
              onChange={e => this.HandelChange(e)}
              value={this.state.valid}
            />
          </label>
          <input type="submit" value="提交" />
        </form>
      </div>
    );
  }

  /**以下是优化的**/
  HandelChange(event) {
    console.log(event.target.name)
    this.setState({
      // 这个地方设置一个动态的key
      [event.target.name]: event.target.value
    })
  }

或者:
  HandelChange(e) {
    console.log(e.target);
    console.log(e.target.name);
    const name = e.target.name
    this.setState({
      [name]: e.target.value,
    });
  }

实际截图:

image.png

非受控组件

import React, { PureComponent,createRef } from 'react';


// 非受控组件里面的数据 不在是由我们的this.state来控制了 而是你用 ref取值的形式来处理了
class App extends PureComponent {
  constructor(props) {
    super(props)
    this.usernameRef = createRef()
  }
  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
      <label htmlFor="username">
        用户:
        <input type="text" id="username" ref={this.usernameRef} />
      </label>
      <input type="submit" value="提交"/>
        </form>
      </div>
    );
  }
  handleSubmit(e) {
    e.preventDefault()
    console.log(this.usernameRef.current.value);
  }

}

export default App;

image.png