อยากทำเป็นปุ่มง่ายๆ 1 ปุ่มเพื่อที่เราจะกดคลิกแล้วทำการ Copy ข้อมูลในช่องที่เราต้องการ หน้าตาประมาณนี้
คือเคนอยากจะกดปุ่มให้มันก๊อปปี้ข้อมูลในช่องข้อความมาให้ โดยไม่ต้องไปเลือกข้อความทั้งหมดแล้วทำการกดก๊อบปี้เอง (ขี้เกียจแล้วขี้เกียจอีก)
มาดูโค้ดกันดีกว่า
เริ่มแรกทำการกำหนดค่าฟังก์ชั่นให้ปุ่มก่อนเลยโดยเคนจะใช้การเรียกฟังก์ชั่น onCopyClick แล้วส่งค่า id ของแถวนั้นๆ ไป
<button className="btn btn-secondary" onClick={this.onCopyClick.bind(this, item._id)}> <i className="fas fa-copy" /> </button>
จากนั้นทำการกำหนด id ให้กับ tr ของเราสักหน่อย เพื่อให้เลือกเจาะจงมาที่แถวที่ต้องการได้ง่ายขึ้น และกำหนดอีกว่าช่องที่เราจะทำการ Copy ใส่ class ชื่อ text ไว้ด้วย
<tr id={`row_${item._id}`} key={item._id}> <td>{item.name}</td> <td className="text"> {item.text.split('\n').map((item, index) => { return ( <span key={index}> {item} <br /> </span> ); })} </td> <td> <button className="btn btn-secondary" onClick= {this.onCopyClick.bind(this, item._id)}> <i className="fas fa-copy" /> </button> </td> </tr>
ต่อมาเรามาเขียนฟังก์ชั่นของ React กัน (บอกก่อนนะว่าตัดส่วนที่ใช้เช็ค Error ต่างๆ ออกไปละ เหลือโค้ดทำงานเพียวๆ )
// ที่ใช้ = id = > {} แบบนี้เพราะจะได้ไม่ต้องไปกำหนดใน constructor() ว่าให้ bind ค่าเข้าไปในฟังก์ชั่นนี้อีกที ง่ายๆ ก็ลดขั้นตอนแหละ onCopyClick = id => { const row = document.getElementById(`row_${id}`); // ใช้ `` แทน '' นะ ไม่ได้ใช้ผิดแต่อย่างใด ถ้าใช้เป็น '' ก็จะเป็น 'row_' + id const text = row.querySelector('td.text'); let range = document.createRange(); let sel = window.getSelection(); sel.removeAllRanges(); range.selectNodeContents(el); sel.addRange(range); document.execCommand('copy'); }