반응-제어되지 않은 입력 변경

반응-제어되지 않은 입력 변경

---

제어 된 입력이 하나 있다고 생각되는 형식의 간단한 반응 구성 요소가 있습니다.

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: '' };

입력이 처음부터 제어되어 문제가 해결됩니다. 더 많은 예는 반응 제어 구성 요소 를 참조하십시오 .

이 오류와 관련이없는 경우 기본 내보내기는 하나만 있어야합니다. 위의 코드에는 두 가지가 있습니다.

---

컴포넌트를 처음 렌더링 할 때이 this.state.name설정되어 있지 않으므로로 평가되고 undefined에로 전달 value={undefined}됩니다 input.

필드가 제어되는 경우 ReactDOM 여부를 확인하는 경우 그것을 확인 있는지 확인하기 위해value != null (그것의주의 !=,하지를 !==)하고 있기 때문에 undefined == null자바 스크립트에서, 그것은 통제되지 않은하다고 결정한다.

따라서 onFieldChange()호출 될 때 this.state.name문자열 값으로 설정되면 입력이 제어되지 않는 상태에서 제어되는 상태가됩니다.

this.state = {name: ''}생성자에서 수행하는 경우 '' != null, 입력은 항상 값을 가지므로 해당 메시지는 사라집니다.

---

다른 접근 방식은 다음과 같이 입력 내부의 기본값을 설정하는 것입니다.

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

---

나는 다른 사람들이 이미 이것에 대답했다는 것을 안다. 그러나 다른 사람들이 비슷한 문제를 겪을 수 있도록 도와주는 매우 중요한 요소 중 하나는 다음과 같습니다.

onChange입력 필드에 핸들러를 추가 해야합니다 (예 : textField, 확인란, 라디오 등). 그리고 항상 onChange다음과 같이 핸들러를 통해 활동을 처리하십시오 .

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

체크 박스 로 작업 할 때 다음 checked과 !!같이 상태 를 처리해야 할 수도 있습니다 .

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

참조 : https://github.com/facebook/react/issues/6779#issuecomment-326314716

---

생성자에서 필드 값을 ""(빈 문자열)로 설정하면 잠재적 인 단점은 필드가 선택적 필드이고 편집되지 않은 상태입니다. 양식을 게시하기 전에 일부 마사지를 수행하지 않으면 필드는 데이터 저장소에 NULL 대신 빈 문자열로 유지됩니다.

이 대안은 빈 문자열을 피합니다.

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

... 

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

---

이 문제를 해결하는 간단한 해결책은 기본적으로 빈 값을 설정하는 것입니다.

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

---

제 경우에는 정말 사소한 것이 빠져있었습니다.

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

경고를받을 때 상태는 다음과 같습니다.

state = {
   myObject: undefined
}

내 value의 입력 을 참조하도록 내 상태를 번갈아 가면서 내 문제가 해결되었습니다.

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

---

onChange={this.onFieldChange('name').bind(this)}입력에서 사용할 때는 상태 빈 문자열을 속성 필드 값으로 선언해야합니다.

잘못된 방법 :

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

올바른 방법 :

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

---

구성 요소의 소품이 상태로 전달 된 경우 입력 태그에 기본값을 입력하십시오.

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

---

초기 상태에서 값을 'name'속성으로 설정하십시오.

this.state={ name:''};

---

이것에 대한 업데이트. 반응 고리 사용const [name, setName] = useState(" ")

---

이것은 일반적으로 응용 프로그램이 시작될 때 제출 된 파일의 값을 제어하지 않고 일부 이벤트 또는 일부 기능이 시작되거나 상태가 변경된 후에 만 ​​입력 필드의 값을 제어하려고 시도하는 경우에만 발생합니다.

입력을 제어하지 않고 제어 할 수있게되면서 문제가 처음에 발생합니다.

이를 피하는 가장 좋은 방법은 구성 요소 생성자에서 입력 값을 선언하는 것입니다. 입력 요소는 응용 프로그램의 시작부터 값을 갖습니다.

참고 URL : https://stackoverflow.com/questions/37427508/react-changing-an-uncontrolled-input