私のフォームフィールドは、reactコンポーネントによって個別にラップされています。このreactコンポーネントは、サードパーティのモジュールから提供されます。私の課題は、「ref」を設定し、そのコンポーネントの外部でその「ref」を取得して.focus、それを呼び出すことができるようにすることです。
注：サードパーティモジュールのコードを変更するためのアクセス権がありません。
コードにアクセスできず、重要なことにReact 16+を使用していないため、.createRefと.forwardRefを使用できません。
<WrapperComponent/> このコンポーネントには、外部からフォーカスを設定する必要がある入力フィールドがあります。
構造は以下のようになります。
MyComponent: // Where I want to access the ref
render() {
return (
<div>
<WrapperComponent id={id} />
</div>
);
}
ラッパーコンポーネント（これは、内部に入力フィールドがあるサードパーティコンポーネントです。構造は次のようになります）：
render() {
return (<input type="text" id={id} />);
}
クリーンな方法は、サードパーティコンポーネントをフォークして、参照を公開することです。
回避策の1つは、サードパーティコンポーネントを拡張することです。
class FirstParty extends ThirdParty {
inputRef = React.createRef();
render() {
const inputReactEl = super.render();
return React.cloneElement(inputReactEl, { ref: this.inputRef });
}
}
別の回避策はそれをラップすることです：
class FirstParty extends Component {
componentDidMount() {
this.inputDomEl = ReactDOM.findDOMNode(this);
}
render() {
return <ThirdParty {...this.props}/>;
}
}
React 15が使用されている場合、createRef参照をレガシー参照に変更できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加