如何在 React 组件中正确使用 Refs的指南

接下来，让我们看一个在 React 组件中使用 refs 的示例。
使用 Refs 聚焦输入
这是另一个例子：
[JavaScript] 纯文本查看 复制代码
?

// Ref.jsclass CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}

focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we"re accessing "current" to get the DOM node
this.textInput.current.focus();
}

render() {
// tell React that we want to associate the ref
// with the textInput that we created in the constructor
return (

注意，当 ref 属性被一个 HTML 元素使用时（比如当前示例中的 input 元素），在 constructor 中使用 React.createRef() 创建的 ref 会接收来自底层 DOM 元素的 current 值。
译注：这里的 current 应该是 合成事件(SyntheticEvent)
这意味着访问 DOM 值，我们需要写这样的东西：
[JavaScript] 纯文本查看 复制代码
?
1
this.textInput.current;

第二个元素是一个按钮，点击它之后会自动聚焦到第一个输入框上面。我们为 onClick 属性设置了 this.focusTextInput 函数。
[JavaScript] 纯文本查看 复制代码
?

type="button"
value="Focus the text input"
onClick={this.focusTextInput}/>
函数 focusTextInput() 使用了 JavaScript 构建 DOM 的标准函数。 .focus() 方法会将光标聚焦于文本输入框上。
[JavaScript] 纯文本查看 复制代码
?

focusTextInput() {
this.textInput.current.focus();}
最后，focusTextInput 函数绑定在这样的 constructor 方法中的：
[JavaScript] 纯文本查看 复制代码
?

this.focusTextInput = this.focusTextInput.bind(this);
从 ref 中获取值
在这个例子中，我们将看到如何为 input 输入框设置 ref 属性，并通过 ref 来获取值。示例如下：
在这个例子中，我们创建了一个 input 输入框来输入值。然后，当单击提交按钮时，我们将读取此值，并在控制台打印。
[JavaScript] 纯文本查看 复制代码
?

// Ref.jsclass CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
}
handleSubmit = e => {
e.preventDefault();

console.log(this.textInput.current.value);
};

render() {
// tell React that we want to associate the ref
// with the textInput that we created in the constructor
return (

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput);};
上面，参数 e 包含事件对象。我们使用e.preventDefault() 来告诉浏览器我们正在处理被点击的提交按钮，我们不希望这个事件“冒泡”（意思就是说，阻止浏览器的默认行为）。
译注：这里可以看一下 React 对于事件的处理：在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault
在上面示例中，我们打印了 this.textInput ，在控制台可以看到一个 ref 对象。
[JavaScript] 纯文本查看 复制代码
?
1

Object {current: HTMLInputElement}
请注意，它有一个 current属性，即 HTMLInputElement 。这是 input DOM 元素本身，而不是实际值。 我们必须使用 this.textInput.current.value 来获取 input 标签的实际值：
[JavaScript] 纯文本查看 复制代码
?

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.current.value);};
使用 refs 是一种从表单中直接提取值的方式：只需要给 input 标签设置 ref ，并在你需要的时候将值提取出来。
Refs 回调
Refs 回调 是在 React 中使用 ref 的另一种方式。要以这种方式使用 ref，我们需要为 ref 属性设置回调函数。当我们设置 ref 时，React 会调用这个函数，并将 element 作为第一个参数传递给它。
这是另一个例子的代码。像上面的示例一样，此代码获取 input 标签的文本值，但在这里我们使用回调引用：
[JavaScript] 纯文本查看 复制代码
?

// Refs.jsclass CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = null;

this.setTextInputRef = element => {
this.textInput = element;
};
}

handleSubmit = e => {
e.preventDefault();
console.log(this.textInput.value);
};

render() {
return (

然后，我们可以在组建上得到这样的值：this.refs.textInput.value - 但是，再次声明，这不应该在新代码中使用，因为这个 API 将被弃用。
转发 Refs (Forwarding Refs)
Ref forwarding 是一种将 ref 通过组件传递给其子节点的技术。它对于可复用组件库和高阶组件（HOC）等情况非常有用。
您可以使用 React.forwardRef 函数将 ref 转发到组件。我们来看下面的例子：
[JavaScript] 纯文本查看 复制代码
?

// Ref.jsconst TextInput = React.forwardRef((props, ref) => (
));const inputRef = React.createRef();class CustomTextInput extends React.Component {
handleSubmit = e => {
e.preventDefault();
console.log(inputRef.current.value);
};

render() {
return (

然后，我们将 ref 通过为组件 指定一个同名的 JSX 的属性，将 ref 向下传递。然后 React 将会把 ref 作为第二个参数转发给 forwardRef 函数。
接下来，我们将此 ref 参数转发给 。现在可以在外层组件通过 inputRef.current 访问DOM节点的值了。
转发 refs 和高阶组件
最后，让我们看一下使用 refs 的另一个例子，但这次是使用高阶组件（HOC）。
在上面的示例应用程序中，会将所有 input 标签中输入的值在控制台打印。这里已经为 input 标签设置了 ref 属性，接下来，让我们看一下需要如何在高阶组件中传递 / 转发 ref 。
[JavaScript] 纯文本查看 复制代码
?

const Input = InputComponent => {
const forwardRef = (props, ref) => {
const onType = () => console.log(ref.current.value);
return ;
};
return React.forwardRef(forwardRef);};
这里有一个名为 Input 的高阶组件 ，它接受 InputComponent 作为参数。当用户输入的时候，他还会将 ref 的值在控制台打印。
在 Input 高阶组件内，forwardRef 函数会返回 InputComponent。forwardRef 函数中所包含的 ref 参数，是由 React.forwardRef 函数创建的。 高阶组件最终会将包装好的组件作为值返回。
接下来，我们创建一个组件，将 input 作为子组件包含进来。
[JavaScript] 纯文本查看 复制代码
?

const TextInput = ({ forwardedRef, children, ...rest }) => (

const InputField = Input(TextInput);class CustomTextInput extends Component {
render() {
const inputRef = React.createRef();

return ;
}}
最后，将 TextInput 传入 Input 高阶组件，会返回一个 InputField component。
创建一个 ref ，并作为参数传递给 InputField 组件。
结论
与通过 props 和 state 不同，Refs 是一种将数据传递给特定子实例的好方法。
你必须要小心，因为 refs 操纵实际的 DOM，而不是虚拟的 DOM，这与 React 思维方式相矛盾。因此，虽然 refs 不应该是通过应用程序流动数据的默认方法，但是当您需要时，它们是可以从 DOM 元素读取数据的好方法。