ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

Lifting State Up

     บ่อยครั้ง Component ต่างๆจำเป็นต้องสะท้อนถึงข้อมูลที่มีการเปลี่ยนแปลงที่เหมือนกัน ในตัวอย่างต่อไปนี้เราจะสร้างเครื่องคำนวณอุณหภูมิที่คำนวณว่าน้ำจะเดือดที่อุณหภูมิที่กำหนดหรือไม่

     เราจะเริ่มต้นด้วย Elements ที่ชื่อว่า BoilingVerdict และแสดงค่าอุณหภูมิ เมื่อน้ำเดือด :

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

     จากนั้นเราจะสร้าง Component ที่เรียกว่าเครื่องคิดเลข มันทำให้ <input> ที่ช่วยให้เราสามารถป้อนอุณหภูมิและเก็บค่าใน this.state.temperature

     นอกจากนี้ จะแสดงค่า BoilingVerdict สำหรับค่า Input ในปัจจุบัน ข้างล่างนี้จะเป็นโค้ดอุณหภูมิน้ำ :

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />
        <BoilingVerdict
          celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}

     ผลที่ได้มีดังนี้ : ถ้าเรากรอกอุณหภูมิ 10 ลงไป ก็จะแสดงค่าว่า not boil แต่ถ้าเรากรอก 100 ลงไป จะแสดงค่า boil

temptemp

 

การเพิ่ม Input ที่สอง

     ต่อไปเราจะให้ข้อกำหนดใหม่นอกเหนือจากการป้อนค่า Celsius เราจะมี Input ของ Fahrenheit และจะถูกเก็บไว้ในข้อมูลตรงกัน เราจะเริ่มจากการดึง Component TemperatureInput จาก Calculator โดยเราจะเพิ่มสเกลใหม่ลงไป อาจจะเป็น "C" หรือ "F" :

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

     ตอนนี้เราสามารถเปลี่ยน Calculator เพื่อแสดงอุณหภูมิสองแบบแยกกันได้ :

class Calculator extends React.Component {
  render() {
    return (
      <div>
        <TemperatureInput scale="c" />
        <TemperatureInput scale="f" />
      </div>
    );
  }
}

     ผลลัพธ์ที่ได้ : จะได้ Input สองช่อง

temp2temp2

     ตอนนี้เรามี Input สองตัว แต่เมื่อเราป้อนอุณหภูมิในรายการใดรายการหนึ่งข้อมูลอื่น ๆ จะไม่อัปเดต สิ่งนี้ขัดแย้งกับข้อกำหนด : ดังนั้นเราต้องทำให้ข้อมูลตรงกัน

     เรายังไม่สามารถแสดง BoilingVerdict จาก Calculator ได้ เพราะว่า Calculator ไม่ทราบอุณหภูมิปัจจุบัน เพราะมันถูกซ่อนอยู่ภายใน TemperatureInput

 

การเขียนฟังก์ชั่นการแปลงค่า

     ขั้นแรกเราจะเขียนสองฟังก์ชั่นเพื่อแปลงจาก Celsius เป็น Fahrenheit และมีการแสดงค่ากลับกัน :

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

     ฟังก์ชันทั้งสอง แปลงตัวเลข เราจะเขียนฟังก์ชันอื่นที่ใช้สตริง temperature และฟังก์ชันแปลงเป็น Arguments และส่งกลับสตริง เราจะใช้มันในการคำนวณค่าของหนึ่ง Input โดยใช้ Input อื่น ๆ ส่งกลับสตริงที่ว่างเปล่าใน temperature ที่ไม่ถูกต้องและจะให้ผลลัพธ์ปัดเศษทศนิยมที่สาม :

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

     ตัวอย่างเช่น tryConvert ('abc', toCelsius) จะ return ค่าว่างและ tryConvert ('10 .22 ', toF) จะแสดงผลลัพธ์ '50 .396'

 

Lifting State Up

     ตอนนี้ทั้งสอง Component TemperatureInput อิสระเก็บค่าในสถานะ Local :

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    // ...  

     อย่างไรก็ตามเราต้องการให้ Input ทั้งสองตัวนี้ซิงค์กัน เมื่อเราอัพเดต Input Celsius ค่าของ Fahrenheit ควรสะท้อนถึงอุณหภูมิที่เปลี่ยนแปลงและในทางกลับกัน

     ใน React การแบ่งปัน state ทำได้โดยการเคลื่อนย้ายไปยัง parent ร่วมกันที่ใกล้เคียงที่สุดของ Component ที่จำเป็นต้องใช้ นี้เรียกว่า "Lifting State Up" เราจะลบสถานะภายในออกจาก TemperatureInput และย้ายไปยัง Calculator แทน

     สำหรับอุณหภูมิปัจจุบันใน Input ทั้งสอง สามารถสั่งให้ทั้งสองมีค่าที่สอดคล้องกัน เนื่องจากส่วนกำหนดค่าของส่วนประกอบ TemperatureInput ทั้งสองมาจาก Component Calculator หลักเดียวกัน Input ทั้งสองจะซิงค์กันอยู่เสมอ

 

มาดูกันใน Step ต่อไปเลยดีกว่า

     ขั้นแรกเราจะแทนที่ this.state.temperature ด้วย this.props.temperature ใน Component TemperatureInput ตอนนี้สมมติว่า this.props.temperature มีอยู่แล้วแม้ว่าเราจะต้องส่งต่อจาก Calculator ในอนาคต :

render() {
    // Before: const temperature = this.state.temperature;
    const temperature = this.props.temperature;
    // ...

     เรารู้ว่า props เป็นแบบอ่านอย่างเดียว เมื่อ Temperature อยู่ใน Local state TemperatureInput สามารถเรียกใช้ this.setState() เพื่อเปลี่ยนได้ อย่างไรก็ตามตอนนี้ Temperature ที่มาจาก parent เป็น props TemperatureInput ที่ไม่มีการควบคุม

     ใน React จะแก้ไขได้โดยการทำให้ Component เป็นตัวควบคุม เช่นเดียวกับ DOM <input> ยอมรับทั้ง value และ onChange prop ดังนั้น TemperatureInput ที่กำหนดเองจึงสามารถรับ Temperature ทั้งสอง onTemperatureChange จาก Calculator หลักได้

     ตอนนี้เมื่อ TemperatureInput ต้องการที่จะปรับปรุงอุณหภูมิ จะมีการเรียก this.props.onTemperatureChange :

  handleChange(e) {
    // Before: this.setState({temperature: e.target.value});
    this.props.onTemperatureChange(e.target.value);
    // ...

     Example โค้ดคำนวนอุณหภูมิที่สมบูรณ์แล้ว :

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

     ผลลัพธ์ที่ได้ : เมื่อกรอกอุณหภูมิลงไปในช่อง Celsius จะมีการคำนวนค่า Fahrenheit และแสดงออกมาในช่อง Output

 

temp3temp3

 

 

 

ข้อมูลอ้างอิง : https://reactjs.org

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - บริษัท approve ประวัติที่ส่งมาสมัครเเล้ว เเต่ยังแสดงสถานะเดิมอยู่
โดย thatsawan อ 26 พฤษภาคม 2020 6:27 pm บอร์ด Odoojob.com - Tester
0
4
อ 26 พฤษภาคม 2020 6:27 pm โดย thatsawan
อยากทราบวิธีการแก้ไข ภาษาไทยกลายอักษรแปลกๆ
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 4:35 pm บอร์ด Programming - PHP
1
22
จ 25 พฤษภาคม 2020 5:43 pm โดย thatsawan
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
1
28
จ 25 พฤษภาคม 2020 2:42 pm โดย thatsawan
บันทึกประชุม มารียา ซีฟู้ดส์
โดย thatsawan จ 25 พฤษภาคม 2020 11:40 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
1
จ 25 พฤษภาคม 2020 11:40 am โดย thatsawan
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
42
จ 25 พฤษภาคม 2020 8:03 pm โดย ขุนพล ตั้นตระกูล
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp
ความคืบหน้า / Progress
โดย mindphp อ 24 พฤษภาคม 2020 3:46 am บอร์ด FDD (Main)
1
3
อ 26 พฤษภาคม 2020 8:18 am โดย mindphp
VDO - SP Page builder
โดย numtan5839 ศ 22 พฤษภาคม 2020 6:27 pm บอร์ด SP Page Builder Thai Edition - Manual & VDO & เทคนิคการใช้งาน
1
7
ศ 22 พฤษภาคม 2020 7:00 pm โดย mindphp
วิธีการใช้ Google Tasks แอพจัดการบันทึกสิ่งที่ต้องทำ
โดย sirirat ศ 22 พฤษภาคม 2020 11:04 am บอร์ด Share Knowledge
0
62
ศ 22 พฤษภาคม 2020 11:04 am โดย sirirat
งานประจำวันที่ 22 พฤษภาคม 2563
โดย sirirat ศ 22 พฤษภาคม 2020 10:10 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
1
15
ศ 22 พฤษภาคม 2020 11:22 am โดย numtan5839
สรุปการเรียนรู้ประจำวัน 21/05/63
โดย sirirat ศ 22 พฤษภาคม 2020 10:08 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
3
ศ 22 พฤษภาคม 2020 10:08 am โดย sirirat
รายงานความคืบหน้า / Process
โดย mindphp ศ 22 พฤษภาคม 2020 1:07 am บอร์ด SP Page Builder Thai Edition (Main)
1
3
ศ 22 พฤษภาคม 2020 1:34 am โดย mindphp
ส่ง site map ให้ google แต่ไม่โชว์ในเมนูบนเว็บเรา จะมีผลอะไรกับเว็บไหมครับ
โดย toonytoony2004 พฤ 21 พฤษภาคม 2020 10:17 pm บอร์ด Joomla Development
6
94
ส 23 พฤษภาคม 2020 10:56 pm โดย toonytoony2004
B - เวลาของบอร์ดไม่ตรงเวลาไทย
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:19 pm บอร์ด Odoojob.com - Tester
0
2
พฤ 21 พฤษภาคม 2020 5:19 pm โดย thatsawan
(Close)B - ข้อความแนะนำตัว ของผู้สมัครไม่แสดงใน บริษัทที่เปิดรับ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:18 pm บอร์ด Odoojob.com - Tester
2
5
อ 26 พฤษภาคม 2020 6:22 pm โดย thatsawan
R - [email Formart-หาคน] เเจ้งเมื่อมีคนสมัครงานใน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:12 pm บอร์ด Odoojob.com - Manual & Content
0
1
พฤ 21 พฤษภาคม 2020 5:12 pm โดย thatsawan
B - บริษัทหาคน ต้องการเปลี่ยน Email รับสมัครงานหาทางเข้าไม่เจอ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:07 pm บอร์ด Odoojob.com - Tester
0
3
พฤ 21 พฤษภาคม 2020 5:07 pm โดย thatsawan