React - เปลี่ยนอินพุตที่ไม่ได้ควบคุม

ฉันมีองค์ประกอบการตอบสนองที่เรียบง่ายด้วยแบบฟอร์มซึ่งฉันเชื่อว่ามีอินพุตที่ควบคุมได้หนึ่งรายการ:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

เมื่อฉันเรียกใช้แอปพลิเคชันของฉันฉันจะได้รับคำเตือนต่อไปนี้:

คำเตือน: MyForm กำลังเปลี่ยนอินพุตข้อความที่ไม่สามารถควบคุมได้เพื่อควบคุม องค์ประกอบอินพุตไม่ควรสลับจากที่ไม่มีการควบคุมเป็นการควบคุม (หรือในทางกลับกัน) ตัดสินใจระหว่างการใช้อิลิเมนต์อินพุตที่ควบคุมหรือไม่มีการควบคุมสำหรับอายุการใช้งานของส่วนประกอบ

ฉันเชื่อว่าอินพุตของฉันถูกควบคุมเนื่องจากมีค่า ฉันสงสัยว่าฉันทำอะไรผิด

ฉันใช้ React 15.1.0

ฉันเชื่อว่าอินพุตของฉันถูกควบคุมเนื่องจากมีค่า

เพื่อให้อินพุตถูกควบคุมค่าของมันจะต้องสอดคล้องกับของตัวแปรสถานะ

เงื่อนไขนั้นไม่ตรงกับตัวอย่างของคุณในตอนแรกเนื่องจากthis.state.nameไม่ได้ตั้งค่าไว้ในตอนแรก ดังนั้นอินพุตจะไม่ถูกควบคุมในขั้นต้น เมื่อonChangeตัวจัดการถูกทริกเกอร์เป็นครั้งแรกให้this.state.nameตั้งค่า ณ จุดนั้นเงื่อนไขดังกล่าวข้างต้นเป็นที่พอใจและถือว่าการป้อนข้อมูลได้รับการควบคุม การเปลี่ยนจากการที่ไม่มีการควบคุมเป็นการควบคุมทำให้เกิดข้อผิดพลาดที่เห็นด้านบน

โดยเริ่มต้นthis.state.nameในการสร้าง:

เช่น

this.state = { name: '' };

อินพุตจะถูกควบคุมตั้งแต่เริ่มต้นแก้ไขปัญหา ดูที่React Components ที่ควบคุมสำหรับตัวอย่างเพิ่มเติม

ไม่เกี่ยวข้องกับข้อผิดพลาดนี้คุณควรมีการส่งออกเริ่มต้นหนึ่งรายการเท่านั้น รหัสของคุณด้านบนมีสอง

เมื่อคุณทำให้องค์ประกอบของคุณthis.state.nameไม่ได้ตั้งค่าดังนั้นจึงประเมินundefinedหรือnullและคุณจะจบลงผ่านvalue={undefined}หรือ ที่คุณvalue={null}input

เมื่อตรวจสอบ ReactDOM เพื่อดูว่าข้อมูลที่มีการควบคุมตรวจสอบเพื่อดูว่าvalue != null (หมายเหตุว่ามันเป็น!=ไม่ได้!==) และตั้งแต่undefined == nullใน JavaScript ก็ตัดสินใจว่ามันเป็นไม่สามารถควบคุมได้

ดังนั้นเมื่อonFieldChange()ถูกเรียกใช้this.state.nameจะถูกตั้งค่าเป็นค่าสตริงข้อมูลของคุณจะถูกควบคุมโดยไม่มีการควบคุม

ถ้าคุณทำthis.state = {name: ''}ในคอนสตรัคของคุณเพราะ'' != nullข้อมูลของคุณจะมีค่าตลอดเวลาและข้อความนั้นจะหายไป

อีกวิธีหนึ่งที่สามารถตั้งค่าเริ่มต้นภายในอินพุตของคุณเช่นนี้:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

ฉันรู้ว่าคนอื่นตอบคำถามนี้ไปแล้ว แต่ปัจจัยที่สำคัญมากที่นี่อาจช่วยให้ผู้อื่นประสบปัญหาคล้ายกัน:

คุณต้องมีonChangeตัวจัดการเพิ่มในฟิลด์อินพุตของคุณ (เช่นฟิลด์ข้อความช่องทำเครื่องหมายวิทยุ ฯลฯ ) จัดการกิจกรรมผ่านonChangeตัวจัดการเสมอ

ตัวอย่าง:

<input ... onChange={ this.myChangeHandler} ... />

เมื่อคุณกำลังทำงานกับช่องทำเครื่องหมายที่คุณอาจต้องจัดการของรัฐที่มีchecked!!

ตัวอย่าง:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

การอ้างอิง: https://github.com/facebook/react/issues/6779#issuecomment-326314716

วิธีแก้ไขปัญหาอย่างง่าย ๆ ในการแก้ไขปัญหานี้คือการกำหนดค่าว่างโดยปริยาย:

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

ข้อเสียที่เป็นไปได้หนึ่งข้อด้วยการตั้งค่าฟิลด์เป็น "" (สตริงว่าง) ในตัวสร้างคือถ้าฟิลด์เป็นฟิลด์ตัวเลือกและไม่มีการแก้ไขใด ๆ ถ้าคุณไม่ทำการนวดก่อนที่จะโพสต์แบบฟอร์มของคุณเขตข้อมูลจะถูกเก็บไว้ในที่เก็บข้อมูลของคุณเป็นสตริงว่างเปล่าแทนที่จะเป็น NULL

ทางเลือกนี้จะหลีกเลี่ยงสตริงว่าง:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

เมื่อคุณใช้onChange={this.onFieldChange('name').bind(this)}ในการป้อนข้อมูลของคุณคุณจะต้องประกาศสตริงว่างสถานะของคุณเป็นค่าของเขตข้อมูลทรัพย์สิน

วิธีที่ไม่ถูกต้อง:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

วิธีที่ถูกต้อง:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

ในกรณีของฉันฉันขาดอะไรที่สำคัญไปหน่อย

<input value={state.myObject.inputValue} />

สถานะของฉันเป็นดังต่อไปนี้เมื่อฉันได้รับคำเตือน:

state = {
   myObject: undefined
}

ด้วยการสลับสถานะของฉันเพื่ออ้างอิงอินพุตของค่าของฉันปัญหาของฉันได้รับการแก้ไข:

state = {
   myObject: {
      inputValue: ''
   }
}

หากอุปกรณ์ประกอบฉากของคุณถูกส่งเป็นสถานะให้ใส่ค่าเริ่มต้นสำหรับแท็กอินพุตของคุณ

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

ตั้งค่าคุณสมบัติ 'ชื่อ' ในสถานะเริ่มต้น

this.state={ name:''};

การอัปเดตสำหรับสิ่งนี้ สำหรับ React Hooks ใช้const [name, setName] = useState(" ")

โดยทั่วไปจะเกิดขึ้นเฉพาะเมื่อคุณไม่ได้ควบคุมค่าของการยื่นเมื่อแอปพลิเคชั่นเริ่มต้นและหลังจากเหตุการณ์บางอย่างหรือบางฟังก์ชั่นเริ่มทำงานหรือมีการเปลี่ยนแปลงสถานะตอนนี้คุณกำลังพยายามควบคุมค่าในฟิลด์อินพุต

การเปลี่ยนแปลงนี้ไม่ได้มีการควบคุมอินพุตและจากนั้นมีการควบคุมมันเป็นสิ่งที่ทำให้เกิดปัญหาในสถานที่แรก

วิธีที่ดีที่สุดในการหลีกเลี่ยงปัญหานี้คือการประกาศค่าบางอย่างสำหรับอินพุตใน Constructor ของส่วนประกอบ เพื่อให้องค์ประกอบอินพุตมีค่าตั้งแต่เริ่มต้นแอปพลิเคชัน

สำหรับการตั้งค่าคุณสมบัติของรัฐแบบไดนามิกสำหรับการป้อนข้อมูลในแบบฟอร์มและทำให้ควบคุมได้คุณสามารถทำสิ่งนี้:

const inputs = [
    { name: 'email', type: 'email', placeholder: "Enter your email"},
    { name: 'password', type: 'password', placeholder: "Enter your password"},
    { name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]

class Form extends Component {
  constructor(props){
    super(props)
    this.state = {} // Notice no explicit state is set in the constructor
  }

  handleChange = (e) => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    }
  }

  handleSubmit = (e) => {
    // do something
  }

  render() {
     <form onSubmit={(e) => handleSubmit(e)}>
       { inputs.length ?
         inputs.map(input => {
           const { name, placeholder, type } = input;
           const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string

           return <input key={name}  type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
       }) :
         null
       }
       <button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
     </form>    
  }
}

เพียงสร้างทางเลือกเป็น '' ถ้า this.state.name เป็นโมฆะ

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

นอกจากนี้ยังใช้งานได้กับตัวแปร useState