React ปุ่มก๊อบปี้ข้อมูลใน Table

อยากทำเป็นปุ่มง่ายๆ 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');
}