Home-theater-designers
React로 개발할 때 양식 및 양식 요소로 작업하는 것은 HTML 양식 요소가 React에서 다른 DOM 요소와 다소 다르게 동작하기 때문에 복잡할 수 있습니다.
확인란, 텍스트 영역 및 한 줄 텍스트 입력과 같은 양식 및 양식 요소로 작업하는 방법을 알아봅니다.
양식의 입력 필드 관리
React에서 양식의 입력 필드 관리는 종종 상태를 생성하고 입력 필드에 바인딩하여 수행됩니다.
Windows에서 Mac 하드 드라이브 읽기오늘의 메이크업 비디오
예를 들어:
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName( event.target.value )
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
위에 우리는 이름 상태, 입력 이벤트, 그리고 핸들 변경 매니저. 그만큼 핸들 변경 기능은 키를 누를 때마다 실행되어 이름 상태.
이 접근 방식은 하나의 입력 필드로 작업할 때 이상적일 수 있지만 여러 입력 필드로 작업할 때 각 입력 요소에 대해 서로 다른 상태 및 처리기 함수를 만드는 것이 반복됩니다.
이러한 상황에서 반복적이고 중복되는 코드를 작성하지 않으려면 각 입력 필드에 고유한 이름을 지정하고 개체를 양식의 초기 상태 값으로 설정한 다음 입력 필드와 동일한 이름을 가진 속성으로 개체를 채웁니다.
예를 들어:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</form>
)
}
그만큼 양식 데이터 양식 내부의 모든 입력 필드를 관리하고 업데이트하는 상태 변수 역할을 합니다. 상태 개체의 속성 이름이 입력 요소의 이름과 동일한지 확인합니다.
입력 데이터로 상태를 업데이트하려면 입력 입력 요소에 이벤트 리스너를 추가한 다음 생성된 핸들러 함수를 호출합니다.
예를 들어:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
위의 코드 블록은 입력 이벤트 및 핸들러 함수, handleFirstNameChange . 이것 handleFirstNameChange 함수는 호출될 때 상태 속성을 업데이트합니다. 상태 속성의 값은 해당 입력 요소의 값과 동일합니다.
입력을 제어되는 구성 요소로 변환
HTML 양식이 제출되면 기본 동작은 브라우저에서 새 페이지로 이동하는 것입니다. 이 동작은 원하는 경우와 같은 일부 상황에서는 불편합니다. 양식에 입력된 데이터 유효성 검사 . 대부분의 경우 양식에 입력된 정보에 액세스할 수 있는 JavaScript 기능이 있는 것이 더 적합하다는 것을 알게 될 것입니다. 이는 제어된 구성 요소를 사용하여 React에서 쉽게 달성할 수 있습니다.
index.html 파일을 사용하면 양식 요소가 상태를 추적하고 사용자 입력에 따라 수정합니다. React에서 상태 설정 기능은 구성 요소의 state 속성에 저장된 동적 상태를 수정합니다. React 상태를 진실의 단일 소스로 만들어 두 상태를 결합할 수 있습니다. 이렇게 하면 양식을 만드는 구성 요소가 사용자가 데이터를 입력할 때 발생하는 작업을 제어합니다. React가 제어하는 값이 있는 입력 양식 요소를 제어 구성 요소 또는 제어 입력이라고 합니다.
React 애플리케이션에서 제어된 입력을 사용하려면 입력 요소에 value prop을 추가하세요.
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData( (prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
이제 입력 요소의 값 특성이 해당 상태 속성의 값으로 설정됩니다. 입력 값은 제어되는 구성 요소를 사용할 때 항상 상태에 따라 결정됩니다.
Textarea 입력 요소 처리
그만큼 텍스트 영역 element는 일반 입력 요소와 같지만 여러 줄 입력을 보유합니다. 한 줄 이상이 필요한 정보를 전달할 때 유용합니다.
index.html 파일에서 텍스트 영역 태그 요소는 아래 코드 블록에서 볼 수 있듯이 자식에 의해 값을 결정합니다.
<textarea>
Hello, How are you?
</textarea>
React를 사용하려면 텍스트 영역 요소, 당신은 유형으로 입력 요소를 만들 수 있습니다 텍스트 영역 .
이렇게:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
사용에 대한 대안 텍스트 영역 입력 유형으로 텍스트 영역 아래와 같이 입력 유형 태그 대신 요소 태그를 사용하십시오.
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
그만큼 텍스트 영역 태그에는 입력된 사용자 정보를 보유하는 값 속성이 있습니다. 텍스트 영역 요소. 이렇게 하면 기본 React 입력 요소처럼 작동합니다.
React의 체크박스 입력 요소로 작업하기
작업할 때 상황이 조금 다릅니다. 확인란 입력. 유형의 입력 필드 확인란 값 속성이 없습니다. 그러나, 체크 기인하다. 이것 체크 속성은 상자가 선택되었는지 여부를 결정하기 위해 부울 값을 요구한다는 점에서 값 속성과 다릅니다.
예를 들어:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
label 요소는 다음을 사용하여 입력 요소의 ID를 참조합니다. htmlFor 기인하다. 이것 htmlFor 속성은 입력 요소의 ID를 사용합니다. 이 경우 합류. 언제 HTML 양식 만들기 , htmlFor 속성은 ~을 위한 기인하다.
그만큼 확인란 제어 입력으로 더 잘 사용됩니다. 상태를 만들고 true 또는 false의 초기 부울 값을 할당하여 이를 달성할 수 있습니다.
에 두 개의 소품을 포함해야 합니다. 확인란 입력 요소: 체크 재산과 onChange 다음을 사용하여 상태 값을 결정하는 핸들러 함수가 있는 이벤트 setIsChecked() 기능.
다른 Google 계정을 기본값으로 만드는 방법
예를 들어:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked( (prevState) => !prevState )
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
이 코드 블록은 isChecked 상태를 유지하고 초기 값을 다음으로 설정합니다. 거짓 . 다음 값을 설정합니다. isChecked ~로 체크 입력 요소의 속성입니다. 그만큼 핸들 변경 함수가 실행되고 상태 값이 변경됩니다. isChecked 확인란을 클릭할 때마다 그 반대입니다.
양식 요소에는 확인란, 텍스트 등과 같은 다양한 유형의 여러 입력 요소가 포함될 수 있습니다.
이러한 경우 동일한 유형의 여러 입력 요소를 처리하는 방식과 유사한 방식으로 처리할 수 있습니다.
예를 들면 다음과 같습니다.
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData( (prevState) => {
return {
...prevState,
[name]: type === checkbox ? checked : value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
참고 핸들 변경 기능, setFormData 삼항 연산자를 사용하여 값을 할당합니다. 체크 대상 입력 유형이 확인란 . 그렇지 않은 경우 다음 값을 할당합니다. 값 기인하다.
이제 React 양식을 처리할 수 있습니다.
여기에서 다양한 양식 입력 요소를 사용하여 React에서 양식으로 작업하는 방법을 배웠습니다. 또한 체크박스로 작업할 때 value prop 또는 checked prop을 추가하여 양식 요소에 제어된 입력을 적용하는 방법도 배웠습니다.
React 양식 입력 요소를 효율적으로 처리하면 React 애플리케이션의 성능이 향상되어 전반적인 사용자 경험이 향상됩니다.