forwardRef

Author: potchangelo

src/App.js

@@ -1,5 +1,7 @@
 import { useRef } from 'react';
 import './App.css';
+import SelectTextarea from './SelectTextarea';
+import SendFile from './SendFile';
 
 function App() {
  const textareaRef = useRef(null);
@@ -17,18 +19,8 @@ function App() {
  return (
  <section className="app-section">
  <div className="app-container">
- <p>
- <textarea ref={textareaRef}></textarea>
- </p>
- <p>
- <button onClick={onSelectTextClick}>เลือกข้อความทั้งหมด</button>
- </p>
- <p>
- <input type="file" ref={fileRef} />
- </p>
- <p>
- <button onClick={onSendClick}>ส่งไฟล์</button>
- </p>
+ <SelectTextarea onSelectTextClick={onSelectTextClick} ref={textareaRef} />
+ <SendFile onSendClick={onSendClick} ref={fileRef} />
  </div>
  </section>
  );

src/SelectTextarea.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const SelectTextarea = React.forwardRef((props, ref) => {
+ return (
+ <div>
+ <p>
+ <textarea ref={ref}></textarea>
+ </p>
+ <p>
+ <button onClick={props.onSelectTextClick}>เลือกข้อความทั้งหมด</button>
+ </p>
+ </div>
+ );
+});
+
+export default SelectTextarea;

src/SendFile.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const SendFile = React.forwardRef((props, ref) => {
+ return (
+ <div>
+ <p>
+ <input type="file" ref={ref} />
+ </p>
+ <p>
+ <button onClick={props.onSendClick}>ส่งไฟล์</button>
+ </p>
+ </div>
+ );
+});
+
+export default SendFile;