受控和非受控组件

# 受控和非受控组件

# ref的使用

在React的开发模式中，通常情况下不需要、也不建议直接操作DOM元素，但是某些特殊的情况，确实需要获取到DOM进行某些操作：

管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。

# 创建ref的方式

如何创建refs来获取对应的DOM呢？目前有三种方式：

方式一：传入字符串
- 使用时通过 this.refs.传入的字符串格式获取对应的元素；
方式二：传入一个对象
- 对象是通过 React.createRef() 方式创建出来的；
- 使用时获取到创建的对象其中有一个current属性就是对应的元素；
方式三：传入一个函数
- 该函数会在DOM被挂载时进行回调，这个函数会传入一个元素对象，我们可以自己保存；
- 使用时，直接拿到之前保存的元素对象即可；
代码：

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

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.titleRef = createRef();
    this.titleEl = null;
  }

  render() {
    return (
      <div>
        {/* 字符串方式 不推荐 */}
        <h2 ref="titleRef">Hello React StringRef</h2>
        {/* 传入对象方式 推荐方式 */}
        <h2 ref={this.titleRef}>Hello React createRef</h2>
        {/* 函数方式 */}
        <h2 ref={element => this.titleEl = element}>Hello React createRef</h2>

        <button onClick={this.changeText.bind(this)}>改变文本</button>
      </div>
    )
  }

  changeText() {
    this.refs.titleRef.innerHTML = 'Hello Ref';

    this.titleRef.current.innerHTML = 'Hello Ref';

    this.titleEl.innerHTML = 'Hello Ref';
  }
}

# ref节点的类型
ref 的值根据节点的类型而有所不同：
- 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性；
- 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性；
- 你不能在函数组件上使用 ref 属性，因为他们没有实例；

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

class Counter extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  render() {
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

function Greeting() {
  return (
    <h2>Hello!</h2>
  );
}

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.titleRef = createRef();
    this.counterRef = createRef();
    this.greetingRef = createRef();
  }

  render() {
    return (
      <div>
        <h2 ref={this.titleRef}>Hello Ref</h2>
        <Greeting ref={this.greetingRef}/>
        <Counter ref={this.counterRef}/>
        <button onClick={e => this.increment()}>app +1</button>
      </div>
    )
  }

  increment() {
    console.log('titleRef', this.titleRef) // h2
    console.log('counterRef', this.counterRef) // Counter
    console.log('greetingRef', this.greetingRef) // null
    this.counterRef.current.increment();
  }
}

函数式组件是没有实例的，所以无法通过ref获取他们的实例：
- 但是某些时候，我们可能想要获取函数式组件中的某个DOM元素；
- 这个时候我们可以通过 React.forwardRef ，后面我们也会学习 hooks 中如何使用ref；
# 受控组件
在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。
而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
- 我们将两者结合起来，使React的state成为“唯一数据源”；
- 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；
- 被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”；
例如，如果我们想让前一个示例在提交时打印出名称，我们可以将表单写为受控组件：

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      username: ""
    }
  }

  render() {
    const {username} = this.state;

    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="username">
            用户名: 
            <input type="text" 
                   id="username" 
                   onChange={e => this.handleUsernameChange(e)} 
                   value={username}/>
          </label>
          <input type="submit" value="提交"/>
        </form>
      </div>
    )
  }

  handleUsernameChange(event) {
    this.setState({
      username: event.target.value
    })
  }

  handleSubmit(event) {
    console.log(this.state.username);
    event.preventDefault();
  }
}

由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。
由于 handleUsernameChange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。
# 常见表单的处理
# textarea标签
texteare标签和input比较相似：

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      article: "请编写你喜欢的文章"
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="article">
            <textarea id="article" cols="30" rows="10"
                      value={this.state.article}
                      onChange={e => this.handleArticelChange(e)}/>
          </label>
          <div>
            <input type="submit" value="发布文章"/>
          </div>
        </form>
      </div>
    )
  }

  handleArticelChange(event) {
    this.setState({
      article: event.target.value
    })
  }

  handleSubmit(event) {
    console.log(this.state.article);
    event.preventDefault();
  }
}

# select标签
select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中。
我们来进行一个简单的演示：

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      fruits: "orange"
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="fruits">
            <select id="fruits" 
                    value={this.state.fruits}
                    onChange={e => this.handleFruitsChange(e)}>
              <option value="apple">苹果</option>
              <option value="orange">橘子</option>
              <option value="banana">香蕉</option>
            </select>
          </label>
          <div>
            <input type="submit" value="提交"/>
          </div>
        </form>
      </div>
    )
  }

  handleFruitsChange(event) {
    this.setState({
      fruits: event.target.value
    })
  }

  handleSubmit(event) {
    console.log(this.state.article);
    event.preventDefault();
  }
}

# 处理多个输入
多处理方式可以像单处理方式那样进行操作，但是需要多个监听方法：
- 这里我们可以使用ES6的一个语法：计算属性名（Computed property names）
进行对应的代码演练:

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      username: "",
      password: ""
    }
  }

  render() {
    const {username, password} = this.state;

    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="username">
            用户: 
            <input type="text" 
                   id="username" 
                   name="username"
                   onChange={e => this.handleChange(e)} 
                   value={username}/>
          </label>
          <label htmlFor="password">
            密码: 
            <input type="text" 
                   id="password" 
                   name="password"
                   onChange={e => this.handleChange(e)} 
                   value={password}/>
          </label>
          <input type="submit" value="提交"/>
        </form>
      </div>
    )
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  handleSubmit(event) {
    console.log(this.state.username, this.state.password);
    event.preventDefault();
  }
}

# 非受控组件

React推荐大多数情况下使用 受控组件 来处理表单数据：

一个受控组件中，表单数据是由 React 组件来管理的；
另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理；

如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。

我们来进行一个简单的演练：

使用ref来获取input元素；
在非受控组件中通常使用defaultValue来设置默认值；

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

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.usernameRef = createRef();
  }

  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="">
            用户:<input defaultValue="username" type="text" name="username" ref={this.usernameRef}/>
          </label>
          <input type="submit" value="提交"/>
        </form>
      </div>
    )
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.usernameRef.current.value);
  }
}

同样，<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked，<select> 和 <textarea> 支持 defaultValue。

编辑

上次更新: 2021/11/10, 12:11:50

← setState详解和React性能优化高阶组件→

受控和非受控组件

# 受控和非受控组件

# ref的使用

# 创建ref的方式

# ref节点的类型

# 受控组件

# 常见表单的处理

# textarea标签

# select标签

# 处理多个输入

# 非受控组件