はじめに
現在チームでプログラミングエディタを作成しています.
react-aceを利用してエディタ部分を作っているのですがreact.jsなんも知らない初心者なので公式ドキュメント見ても詰まりました…
そのメモとして記しておきます.
やりたいこと
タイトルにも書いてあるように選択したテキストを取得します.
道のり
公式ドキュメント
公式ドキュメントにはこんなことが書かれており, よっしゃーとコピペしたらもちろんエラーがでました. 「refs」って誰?って言われました. 僕も同意見です.
もっと読んでみたらドキュメントにこんな記述があって
<AceEditor
ref="aceEditor"
/>;自分のものにはrefがなかったので追加してみましたができませんでした.
というかそもそもエラーでuseRef()やcreateRef()使えと言われました.
これ多分僕が全体的な理解をしてないからわかんないんだろうな.
雲行きが怪しくなってきた…
stack Overflow
似たような質問があった! やったぜ!
React v16.12 +だと
this.refName = React.createRef();refName作って
<AceEditor
ref={this.refName}
/>refを指定して
this.refName.current.editor.getSelectedText()で取得できる.
refを自分で作ってそれを使って繋げてるっぽいな
ありがとうStack Overflow!
最終的なコード
今回はクラスコンポーネントではなく, 関数コンポーネントだったのでちょっと実装は変わりましたがこんな感じになりました.
const myRef = React.createRef();
export default function EditArea () {
const onSelectionChange = () => {
const text = myRef.current.editor.getSelectedText();
console.log(text);
};
return (
<AceEditor
onSelectionChange={onSelectionChange}
ref={myRef}
/>
);
}
onSelectionChangeはセレクションが変わったとき, つまりは選択範囲に変化が生じたときに呼ばれます.
追記
これよりもいいと思われる方法を発見した.
AceEditor の属性にonLoadというのがあり, それはエディタインスタンスを取得できます.
具体的には以下の通りです.
export default function EditArea () {
const editorInstance = "";
const onSelectionChange = () => {
const text = editorInstance.getSelectedText();
console.log(text);
};
onLoad = (newEditorInstance) => {
editorInstance = newEditorInstance;
}
return (
<AceEditor
onSelectionChange={onSelectionChange}
onLoad={onLoad}
/>
);
}
エディタインスタンスの作成が終わったらonLoad関数が呼ばれます.
関数内でeditorInstanceを代入することで準備完了, あとはこのインスタンスの関数から呼び出すだけです.
ちなみにエディタ全体の文字を取得するのはgetValue()です.
おわりに
ちょぉぉぉとreact-aceがわかってきた.
参考
コメント