간단한 html 양식에서 양식 요소는 내부적으로 가치를 유지하고 양식 제출 버튼에 제출합니다.
예시
<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name="username" /> </label> <input type="submit" value="Submit Form" /> </form> </body> </html>
위의 예에서 사용자 이름이라는 간단한 입력이 있고 양식 제출 시 해당 값을 받을 수 있습니다. html 양식의 기본 동작은 새 페이지, 즉 게시물 양식 제출 페이지로 이동하는 것입니다.
그러나 양식 데이터도 확인할 수 있는 양식 제출 처리기 JavaScript 기능이 있으면 더 많은 이점을 얻을 수 있습니다. 유효성 검사는 사용자에게 관련 피드백을 제공합니다.
React에는 제어된 구성 요소라고 하는 양식 제출을 처리하는 기술이 있습니다.
html에서와 같이 input, textarea 등과 같은 요소는 자체 상태를 유지하고 사용자 작업을 기반으로 업데이트합니다. React에서 변경 가능한 필드는 상태 개체와 함께 유지됩니다.
제어된 구성 요소에 대한 React의 접근 방식에서 사용자 이름 필드 처리 -
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.value});
}
handleFormSubmit(event) {
console.log('username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
} 여기에 상태 필드 사용자 이름을 업데이트하기 위한 onChange 핸들러 함수가 있습니다.
formSubmit에서 제출된 사용자 이름을 표시하기 위해 브라우저에 콘솔 로그인을 표시하고 있습니다.
다른 제어되는 구성 요소 유형은 텍스트 영역, 태그 선택, 라디오 버튼 등입니다.
본질적으로 읽기 전용이며 양식 제출 시에만 가치를 얻는 파일 형식과 같이 제어되지 않는 구성 요소가 있습니다.
단일 JS 기능으로 여러 양식 입력 처리 -
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
} 상태 초기화를 사용하여 필드에 기본값을 제공하여 필드에 대해 null 값으로 제어된 입력을 피해야 합니다.
React의 양식 처리에 대한 전체 규모 솔루션의 경우 formik과 같은 타사 라이브러리를 사용하여 수행할 수 있습니다. 유효성 검사, 사용자 피드백 등을 사용하는 것은 간단합니다.