使用字符串形式的 Refs

使用字符串形式的 Refs

React 提供了 ref 用于访问组件实例或 DOM 元素。在一些情况下，我们可能会使用字符串形式的 ref，这样可以更贴近前端程序员的直觉，同时方便进行一些简单的 DOM 操作。在这篇博客中，我们将探讨如何使用字符串形式的 ref，并通过示例演示其实际用法。

字符串形式的 Refs 是什么？

在 React 中，ref 是一个用于访问组件实例或 DOM 元素的特殊属性。通常，我们使用回调函数或者 React.createRef() 来创建 ref。然而，在一些早期的 React 代码或者简单的场景下，我们可以使用字符串形式的 ref。

<input ref="myInput" />

这里，"myInput" 是一个字符串形式的 ref，我们可以通过 this.refs.myInput 来访问这个输入框。

代码实例：使用字符串形式的 Refs

让我们通过一个简单的示例来说明如何使用字符串形式的 ref。如下 React 组件，包含两个输入框，分别在按钮点击和失去焦点时弹出输入内容。

class Demo extends React.Component {
  onClick = () => {
    const { input1 } = this.refs;
    alert(input1.value);
  }

  onBlur = () => {
    const { input2 } = this.refs;
    alert(input2.value);
  }

  render() {
    return (
      <div>
        <input ref="input1" type="text" placeholder="点击按钮显示输入内容" /> &nbsp;
        <button onClick={this.onClick}>点击显示左侧输入内容</button> &nbsp;
        <input ref="input2" type="text" onBlur={this.onBlur} placeholder="失去焦点显示输入内容" />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('root'));

为什么选择字符串形式的 Refs？

1. 简洁直观： 字符串形式的 ref 更贴近传统的 DOM 操作方式，对于一些简单的场景，代码更加简洁。

2. 容易理解： 对于初学者或者快速原型开发，使用字符串形式的 ref 可能更容易理解。

3. 适用场景： 在一些老的 React 项目中或者简单的应用场景下，使用字符串形式的 ref 也是一种选择。

总结

在 React 中，ref 是一个强大的特性，可以用于访问组件实例或 DOM 元素。字符串形式的 ref 提供了一种更直观的方式，让我们更容易进行一些简单的 DOM 操作。在实际开发中，我们可以根据具体场景选择使用回调函数、React.createRef() 还是字符串形式的 ref。选择最适合项目需求的方式，才是最佳实践。

参考

• 以字符串形式使用 Refs
• 完整代码