내 ReactJS 앱에서 \'구성 요소가 제어할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다\'라는 경고가 표시되는 이유는 무엇입니까?

제어되지 않고 제어되는 입력 요소: ReactJS 경고 가이드

ReactJS는 입력 요소의 제어 상태에서 일관성을 유지할 것을 권장합니다. 특정 시나리오에서는 "구성 요소가 제어할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다."라는 경고가 나타날 수 있습니다. 원인을 파헤치고 효과적인 해결책을 모색해 보겠습니다.

문제의 근본

ReactJS에서는 입력 요소를 제어하거나 제어하지 않을 수 있습니다. 제어된 입력은 구성 요소의 상태에 따라 값이 관리되는 입력이고, 제어되지 않은 입력은 사용자가 해당 값을 직접 변경할 수 있는 입력입니다. 처음에 제어되지 않은 것으로 선언된 입력이 나중에 제어된 입력으로 전환될 때 문제가 발생합니다.

다음 코드를 고려하세요.

<br>class MyComponent extends React.Component {<br> 생성자(props) {</p>
<pre class="brush:php;toolbar:false">super(props);
this.state = {
  fields: {}
}

}

onChange(field, e){

let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});

}

render() {

return(
  <div>
    <input
      value={this.state.fields["name"]}
      onChange={this.onChange.bind(this, "name")}
      type="text"
      placeholder="Name *"
    />
  </div>
)

}
}

이 예에서 'name' 입력은 해당 값이 처음에 정의되지 않았기 때문에 제어되지 않습니다(this.state. fields["name"]), 사용자가 자유롭게 변경할 수 있습니다. 그러나 사용자가 값을 입력하면 onChange 핸들러는 this.state.fields.name을 설정하여 입력을 제어된 상태로 효과적으로 전환합니다. 이 상태 전환으로 인해 경고가 발생합니다.

문제 해결

경고를 해결하려면 다음 중 하나를 수행하세요.

1. 상태의 초기 필드 정의: 각 필드에 대해 빈 문자열을 사용하여 this.state.fields를 선언하세요. 이렇게 하면 모든 입력이 초기에 제어됩니다.

   <code class="python">class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      fields: {
        name: '',
      }
    }
     }
   
     // ...
   }</code>

2. 단락 평가 사용: 단락 평가를 사용하여 값 prop을 할당합니다. 값은 빈 문자열로 평가됩니다.

   <code class="python">value={this.state.fields.name || ''}</code>

둘 중 하나의 솔루션을 구현하면 오류를 제거하고 입력 제어 상태의 일관성을 보장할 수 있습니다.

위 내용은 내 ReactJS 앱에서 \'구성 요소가 제어할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다\'라는 경고가 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!