React
반응 양식

제어되는 구성 요소

제어되는 구성 요소는 값에 바인딩되며 해당 변경 내용은 이벤트 기반 콜백을 사용하여 코드에서 처리됩니다.

class CustomForm extends React.Component {
constructor() {
    super();
    this.state = {
        person: {
            firstName: '',
            lastName: ''
        }
    }
}

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

render() {
    return (
        <form>
            <input 
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleChange.bind(this)} />

            <input 
            type="text"
            name="lastName"
            value={this.state.lastName}
            onChange={this.handleChange.bind(this)} />
        </form>
    )
}

}

이 예제에서는 빈 person 객체로 상태를 초기화합니다. 그런 다음 2 개의 입력 값을 person 객체의 개별 키에 바인딩합니다. 그런 다음 사용자가 입력 할 때 handleChange 함수에서 각 값을 캡처합니다. 구성 요소의 값은 상태에 바인딩되므로 setState() 를 호출하여 사용자 유형을 다시 지정할 수 있습니다.

참고 : 제어되는 구성 요소를 처리 할 때 setState() 호출하지 않으면 사용자가 입력하게되지만 입력을 알리면 React는 변경 사항 만 렌더링하기 때문에 입력을 볼 수 없습니다.

또한 입력의 이름이 person 객체의 키 이름과 동일하다는 점도 중요합니다. 이렇게하면 여기에 표시된 사전 형식의 값을 캡처 할 수 있습니다.

handleChange(event) {
    let person = this.state.person;
    person[event.target.name] = event.target.value;
    this.setState({person});
}

person[event.target.name] 은 person.firstName || person.lastName 과 동일 person[event.target.name] person.firstName || person.lastName . 물론 이것은 어떤 입력이 현재 입력되고 있는지에 달려 있습니다. 사용자가 입력 할 위치를 모르고 사전을 사용하고 입력 이름을 키 이름과 일치 시키므로 사용자 입력을 캡처 할 수 있습니다. onChange가 호출되는 곳의 문제.