ReactJS에서 \"제어되지 않은 입력에서 제어된 입력으로의 변환\" 경고를 수정하는 방법은 무엇입니까?

ReactJS에서 제어되지 않은 입력에서 제어된 입력으로의 변환 경고 처리

ReactJS는 구성 요소가 제어되지 않은 입력 요소를 제어된 입력 요소로 전환할 때 개발자에게 경고합니다. 이 오류는 다음 메시지와 연관되어 있습니다.

경고: 구성 요소가 제어할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 비제어에서 제어로(또는 그 반대로) 전환되어서는 안 됩니다. 구성 요소의 수명 동안 제어된 입력 요소를 사용할지 아니면 제어되지 않는 입력 요소를 사용할지 결정하세요.

원인 이해

구성 요소의 상태가 입력 필드를 제어되지 않은 것으로(예: 제어된 값 prop이 없음) 초기화했지만 나중에 해당 값을 설정하여 효과적으로 제어된 입력으로 전환할 때 오류가 발생합니다.

예제 코드

다음 코드 조각을 고려하세요.

<code class="javascript">constructor(props) {
  super(props);
  this.state = {
    fields: {}
  }
}

...

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

...

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

이 예에서 상태는 처음에 빈 개체이므로 입력 필드가 제어되지 않습니다. 그러나 필드 값이 설정되면 입력이 제어되어 경고가 발생합니다.

가능한 해결 방법

문제를 해결하려면 다음 해결 방법을 고려하세요.

1. 상태의 필드 값 초기화: 초기 상태의 입력 필드를 자리 표시자 값으로 정의합니다. 예:

<code class="javascript">this.state = { fields: { name: '' } }</code>

2. 단락 평가 사용: 정의되지 않은 값을 처리하려면 단락 평가를 사용하여 value prop을 설정합니다. 예를 들면 다음과 같습니다.

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

이러한 솔루션을 구현하면 입력 요소가 일관된 상태로 유지되어 제어되지 않은 입력에서 제어된 입력으로의 변환 오류를 방지할 수 있습니다.

위 내용은 ReactJS에서 \"제어되지 않은 입력에서 제어된 입력으로의 변환\" 경고를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!