資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.js 中轉發 ref
傳遞給子元件的 ref 被稱為轉發 ref。React 提供了一個 createRef 函式來為元素建立一個 ref。
forwardRef 是一個傳遞 ref 給子元件的函式。
示例
// ExampleRef.js
const ExampleTextInput = React.forwardRef((props, ref) => (
<input type="text" placeholder="Welcome" ref={ref} />
));
const exampleInputRef = React.createRef();
class NewTextInput extends React.Component {
handleFormSubmit = e => {
e.preventDefault();
console.log(“Entered value: ”+exampleInputRef.current.value);
};
render() {
return (
<div>
<form onSubmit={e => this.handleFormSubmit(e)}>
<NewTextInput ref={exampleInputRef} />
<button>Submit</button>
</form>
</div>
);
}
}顧名思義，ref 轉發只是接收 ref 並將其傳遞給子元件。
ExampleTextInput 中的子元件 input 透過 React.forwardRef 函式接收 ref。
建立 forwardref 的步驟
- React.createRef 用於為元素建立一個 ref 並將其分配給變數 element
- 使用作為 jsx 屬性將上面建立的 ref 附加到元件
- 使用 ref 的元件具有 一個 forwardref 函式，該函式接受 props 和 ref 作為引數。
- ref 引數被傳遞給子元件
- 子元件將 ref 用作 jsx 屬性
- 我們透過指定它為 JSX 屬性將此 ref 引數轉發到 <button ref={ref}>。
- 當 ref 附加時，ref.current 將指向 <button> DOM 節點。
配合高階元件使用 forwardRef −
示例
const InputHoc = ProvidedComponent => {
const forwardRef = (props, ref) => {
const onValueInput = () => console.log(“ref value: ”+ref.current.value);
return < ProvidedComponent
forwardedRef={ref}
onChange={onValueInput}
{...props} />;
};
return React.forwardRef(forwardRef);
};
更新日期： 05-09-2019
340 次瀏覽
廣告