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를 사용하고 있습니다.

답변 1

나는 내 입력이 값으로 제어되는 것을 믿습니다.

입력이 제어되기 위해서는 해당 상태 변수의 값과 일치해야 합니다.

당신의 예제에서 처음에는 이 조건이 충족되지 않습니다. 왜냐하면 this.state.name은 초기에 설정되지 않았기 때문입니다. 따라서 입력은 처음에는 제어되지 않았습니다. 첫 번째로 onChange 핸들러가 실행되면 this.state.name이 설정됩니다. 그 시점에서 위의 조건이 충족되고 입력은 제어되는 것으로 간주됩니다. 이러한 제어되지 않은 상태에서 제어되는 상태로의 전환으로 위에 표시된 오류가 발생합니다.

생성자에서 this.state.name을 초기화함으로써:

예:

this.state = { name: '' };

입력은 처음부터 제어됩니다. 문제를 고칩니다. 자세한 내용은 React 제어되는 컴포넌트를 참조하세요.

이 오류와는 무관하게, 하나의 기본 내보내기만 가져야 합니다. 위의 코드에는 두 개가 있습니다.

답변 2

리액트 - 제어되지 않은 입력 값 변경하기
리액트는 현대적인 웹 개발을 위한 인기 있는 자바스크립트 라이브러리입니다. 사용자와 상호작용하는 웹 애플리케이션을 개발하는 데 필수적인 기능들을 제공합니다. 그 중 하나는 제어되지 않은 입력 값 변경입니다. 이 글에서는 리액트에서 이 기능을 어떻게 처리하는지 알아보겠습니다.
제어되지 않은 입력 값은 일반적으로 리액트에서 사용되는 표현입니다. 이는 입력 요소에 값을 설정하는 데에 대한 제어를 리액트가 가지지 않는다는 것을 의미합니다. 일반적으로 HTML `` 요소에서 발생하는 값의 변화를 추적하거나 변경하는 데 어려움이 있을 수 있습니다.
그러나 리액트에서는 제어되지 않은 입력 값을 쉽게 변경할 수 있는 방법을 제공합니다. 이를 위해 `defaultValue` 또는 `defaultChecked` 속성을 사용할 수 있습니다. 이러한 속성을 사용하면 초기 값을 설정할 수 있으며, 사용자가 값을 변경하면 리액트는 그 변경에 대한 알림을 받게 됩니다.
리액트에서 제어되지 않은 입력 값을 변경하는 방법에 대한 예제를 살펴보겠습니다. 먼저, `` 요소에 `defaultValue` 속성을 추가하여 초기 값을 설정합니다. 그런 다음 `` 요소가 변경되면 `onChange` 이벤트 핸들러를 호출하고, 해당 이벤트 핸들러에서 상태를 업데이트합니다. 이렇게 하면 사용자가 입력 값을 변경하더라도 리액트에서 해당 변경 사항을 추적할 수 있습니다.
또한, 검색 엔진 최적화를 고려한다면 다른 중요한 요소도 고려해야 합니다. 첫째로, 제목과 내용에 키워드를 포함시킬 수 있습니다. 이 글에서는 리액트, 제어되지 않은 입력 값 변경과 같은 주요 키워드를 사용하여 제목과 내용을 작성했습니다. 둘째로, 문장의 길이와 가독성에도 주의해야 합니다. 검색 엔진은 사용자가 정보를 찾는 데 얼마나 수월한지를 고려하므로, 글을 쓸 때 명확하고 간결한 문장을 사용하는 것이 중요합니다.
마지막으로, URL 구조도 중요합니다. 이 글의 URL에서는 핵심 키워드를 포함하도록 구성했습니다. 예를 들어, 리액트-제어되지-않은-입력-값-변경과 같은 형식이 될 수 있습니다. 이렇게 하면 검색 엔진이 해당 URL을 분석하는 동시에 사용자가 원하는 정보를 알려줄 수 있습니다.
이처럼, 리액트에서 제어되지 않은 입력 값 변경에 대한 이해와 검색 엔진 최적화는 현대적인 웹 개발에서 중요한 요소입니다. 이러한 기술을 잘 활용하여 사용자와 상호작용하는 웹 애플리케이션을 개발하는 데에 도움이 되길 바랍니다.