React中ref的实战应用：自动聚焦与银行卡号格式化

在React开发中，`ref`是一个非常重要的特性，它允许我们直接访问到真实DOM节点或者React组件实例。本文将通过两个具体的示例介绍如何使用`ref`。 首先，`ref`通常用于那些需要直接操作DOM的场景，因为在React中，我们通常避免直接操作DOM，而是依赖于React的状态和属性来更新视图。然而，当需要实现特定功能，如自动聚焦、监听键盘事件或在组件外部控制组件的状态时，`ref`就显得非常有用。 第一个示例展示了如何使用`ref`来实现页面加载后自动聚焦到`input`框，并捕获键盘事件。在`App`组件的构造函数中，我们创建了一个`inputRef`，这是一个`createRef()`返回的对象。在`componentDidMount()`生命周期方法中，我们给`inputRef.current`（即与`ref`关联的真实DOM元素）添加了键盘事件监听器，并调用`focus()`方法让`input`框获得焦点。这样，当页面加载完毕后，用户可以直接开始输入，无需手动点击输入框。 ```jsx class App extends Component { constructor(props) { super(props); this.state = { showTxt: "" }; this.inputRef = React.createRef(); } componentDidMount() { this.inputRef.current.addEventListener("keydown", (event) => { this.setState({ showTxt: event.key }); }); this.inputRef.current.focus(); } render() { return ( <div className="app"> <input ref={this.inputRef} /> <p>当前输入的是: <span>{this.state.showTxt}</span></p> </div> ); } } ``` 第二个示例是关于在输入银行卡号时，每输入四个数字自动添加一个空格的实现。这个需求需要实时监控用户输入，当输入字符达到特定条件时进行处理。为此，我们需要监听`input`事件，并根据输入的字符数量判断是否需要插入空格。同时，当用户删除数字时，如果遇到空格，需要同时移除空格和前一个数字。`ref`在这里的作用是让我们能够直接获取到`input`元素，以便监听其变化并做出响应。 实现这个功能，我们需要在`input`元素上添加`ref`，然后在事件处理函数中检查输入值的长度。当长度达到特定值时，插入空格；当删除时，检查当前位置是否为空格，如果是，就移除空格及其前一个字符。 React中的`ref`是一个强大且灵活的工具，它使得开发者能够在不违反React的声明式编程原则的情况下，直接操作DOM节点，实现某些特定功能。在实际开发中，合理利用`ref`可以极大地提升用户体验，但也要注意不要过度依赖，以免破坏组件的封装性和可维护性。