반응에서 제어되는 구성 요소는 무엇입니까

React에서 제어되는 구성 요소는 상태를 사용하여 입력 요소의 값을 가져오고 설정하는 구성 요소입니다. 양식을 렌더링하는 React 구성 요소는 사용자가 수행하는 동안 양식에서 발생하는 작업도 제어한다는 것도 이해할 수 있습니다. 입력 프로세스이며 이런 방식으로 React에 의해 제어됩니다. 값을 취하는 양식 입력 요소를 제어 컴포넌트라고 합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React의 제어 구성요소는 무엇인가요? React 공식 웹사이트에서는 제어 구성요소를 다음과 같이 설명합니다. 양식을 렌더링하는 React 구성요소는 사용자 입력 중에 양식에서 발생하는 작업도 제어합니다. 이런 식으로 React에 의해 값이 제어되는 양식 입력 요소를 "제어되는 컴포넌트"라고 합니다.

상태를 사용하여 입력 요소의 값을 가져오고 설정하는 구성 요소를 제어 구성 요소라고 합니다. , 및 <select>와 같은 태그는 모두 value 속성을 사용하여 제어되는 구성 요소를 구현할 수 있습니다. </select>

일부 네티즌들은 이렇게 설명했습니다. React에서는 폼의 상태가 바뀔 때마다 컴포넌트의 상태에 기록됩니다. 이런 유형의 컴포넌트를 React에서는 제어되는 컴포넌트라고 합니다.

제어 구성요소 업데이트 프로세스:

1, 초기 상태에서 양식의 기본값을 설정할 수 있습니다.

2, 양식의 값이 변경될 때마다 onChange 이벤트 핸들러를 호출합니다.

3, 이벤트 핸들러 가져오기 이벤트 객체 e를 통해 변경된 상태를 변경하고

4, setState는 뷰 업데이트를 트리거하고 양식 구성 요소 값의 업데이트를 완료합니다.

예: input

- 양식 제출 방지

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        this.setState({ value: event.target.value });
    }
    handleSubmit(event) {
        alert('提交的名字: ' + this.state.value);
        event.preventDefault();
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    名字:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

- 파일 유형 input

// file类型的input，属性value是只读的，所以是非受控组件
<input type="file" />

추천 학습: "

react 비디오 튜토리얼

"

위 내용은 반응에서 제어되는 구성 요소는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!