javascript - คำถามสำหรับผู้เรียน: ฟังก์ชันสำหรับทุกช่องข้อความ มีวิธีใดที่จะสร้างฟังก์ชันสากลที่สามารถจัดการหลายช่องข้อความได้หรือไม่

โครงการของผมอยู่ใน SPFX, React/TypeScript/Office UI Fabric ผมพบว่าผมกำลังสร้างฟังก์ชันสำหรับทุกช่องข้อความในฟอร์มที่ผมกำลังสร้าง มีฟังก์ชันที่สามารถจัดการหลายช่องที่คล้ายกันได้หรือไม่ แต่ละช่องข้อความมีสถานะเฉพาะของตัวเอง

ฟังก์ชันช่องข้อความตัวอย่าง:

private _onReason = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({
      Reason: newValue
    });
  }

และอีกอันหนึ่งที่เกือบเหมือนกัน:

private _onPurpose = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({
      Purpose: newValue
    });
  }

เป้าหมายของฉันคืออนุญาตให้ผู้ใช้ส่งสถานะของช่องข้อความหลายช่องเหล่านี้ แต่เพียงลดปริมาณโค้ดลง

ฉันได้อ่านสิ่งนี้แล้วแต่ไม่รู้ว่าจะนำไปใช้ในโปรเจกต์ของฉันอย่างไร: https://www.pluralsight.com/guides/handling-multiple-inputs-with-single-onchange-handler-react

ผมคิดว่าสิ่งหนึ่งที่ขัดขวางไม่ให้ผมใช้โซลูชันของ Pluralsight คือความจริงที่ว่าผมกำลังใช้ MS Fabric UI และ React.FormEvent<HTMLInputElement>, NewValue?: string) ไม่เป็นที่ชอบของฟังก์ชันตัวจัดการที่ผมพยายามด้านล่างนี้:

public handleChange (evt: React.FormEvent<HTMLInputElement>, newValue?: string) {
    const value = evt.target.value;
    this.setState({
      ...this.state,
      [evt.target.name]: value
    });
  }

มันไม่ชอบค่าที่อยู่ท้ายของ const value... มันก็ไม่ชอบชื่อที่ท้ายของ [evt.target.name] ด้วยเช่นกัน

อัปเดต: หลังจากลองทำตามคำแนะนำจากลิงก์ของ Peter ฉันสามารถแก้ไขข้อผิดพลาดหนึ่งข้อจากด้านบนได้แล้ว (ข้อผิดพลาดเรื่องค่า) แต่ยังคงขึ้นข้อผิดพลาดสำหรับ [evt.target.name] (ชื่อแบบเจาะจง)

คำตอบ #1

คำถามของคุณเข้าใจง่ายและกระชับมาก ผมยังชอบลิงก์ที่คุณให้เกี่ยวกับบริบทบางอย่างของปัญหาของคุณด้วย ผมใช้ React hooks และวิธีที่ง่ายที่สุดที่ผมพบเพื่อทำให้โค้ดสั้นลงคือการใช้ฟังก์ชันนิรนามในแอตทริบิวต์ของ JSX เช่นนี้:

<label>
  First name
  <input
    type="text"
    onChange={(e) => {setFirstName(e.target.value)}}
  />
</label>
<p> {firstName} </p>

อย่างไรก็ตาม มันจะดูแตกต่างเล็กน้อยเพราะฉันไม่ได้ถนัดกับ TypeScript มาก ดังนั้นคุณจำเป็นต้องกำหนดประเภทให้กับ e(event) และ firstName(string) และคุณไม่ได้ใช้ React hooks สำหรับคุณ คุณจะต้องแยกวัตถุ state ของคุณออกมา และคุณจะมีไวยากรณ์มากขึ้นเพราะคุณมี state ที่ใหญ่ขึ้นและมีหลายวัตถุ หวังว่านี่จะช่วยได้นะ!