반응 중의 형식
33901 단어 reactwebdevbeginnersjavascript
표는 모든 응용 프로그램에서 가장 중요한 부분이다.이것은 사용자와 응용 프로그램이 상호작용하는 방식의 하나다.우리는 로그인/등록 기능을 실현하고 응용 프로그램에 데이터를 추가하거나 업데이트하는 데 사용되는 폼이 있습니다. 폼은 응용 프로그램에서 중요한 역할을 합니다.HTML에서 양식을 작성하려면
<form> 라는 요소가 있습니다.간단한 HTML 양식은 다음과 같습니다.<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" value="John"><br>
<input type="submit" value="Submit">
</form>
시작합시다.
TL；박사
React에서 양식을 만드는 다른 방법
React에는 두 가지 유형의 구성 요소, 즉 제어 대상 구성 요소와 비제어 구성 요소가 있습니다.따라서 이러한 유형의 도움으로 우리는 두 가지 다른 방식으로 표를 만들 수 있다.
관리 대상 어셈블리 테이블 사용
우리는 input와 같은 HTML 요소가 우리가 입력한 내용을 기억할 수 있다는 것을 안다.따라서 같은 방식으로 우리는react 구성 요소 상태를 사용하여 요소가 포함하는 폼의 데이터를 저장할 수 있다.따라서 폼 요소의 데이터가react 구성 요소로 처리될 때, 이것은 제어 구성 요소라고 부른다.제어 대상 어셈블리에서 유일한 실제 소스는 DOM 요소가 아닌 어셈블리 상태입니다.
본고에서 우리는 제어된 구성 요소를 빌려 표를 실현할 것이다.따라서 입력, 라디오 버튼, 드롭다운 메뉴 선택 등 HTML 요소를 사용합니다.
우리는 하나의 입력 원소를 위해 흐름을 실현한 후에 나머지 원소를 추가할 것이다.양식 태그와 입력 요소가 있는 구성 요소를 만듭니다.다음과 같습니다.
import React, { Component } from "react";
class ControlledFormComponent extends Component {
render() {
return (
<div>
<h3>Controlled Component</h3>
<br />
<form>
<label>Student Name: </label>
<input type="text" placeholder="enter student name" />
</form>
</div>
);
}
}
export default ControlledFormComponent;
이것은 제어된 구성 요소이기 때문에 구성 요소의 상태는 폼 데이터를 처리합니다.따라서 구성 요소에 상태를 만들고 입력 요소에 변경 이벤트를 추가하여 요소의 값을 변경할 때 구성 요소의 상태를 변경합니다.상태 객체의 컨텐트를 보려면 양식 아래쪽에 상태를 인쇄합니다.
import React, { Component } from "react";
class ControlledFormComponent extends Component {
constructor(props) {
super(props);
this.state = {
studentName: ""
};
this.onNameChangeHandler = this.onNameChangeHandler.bind(this);
}
onNameChangeHandler(e){
this.setState({
studentName: e.target.value
})
}
render() {
return (
<div>
<h3>Controlled Component</h3>
<br />
<form>
<label>Student Name: </label>
<input
type="text"
placeholder="enter student name"
onChange={this.onNameChangeHandler} />
</form>
<hr/>
<p>State of Component</p>
<pre>{JSON.stringify(this.state, null, 2) }</pre>
</div>
);
}
}
export default ControlledFormComponent;
마찬가지로 다른 HTML 요소를 추가하여 구성 요소의 상태에 연결할 수 있습니다.
따라서 우리는 라디오 단추를 추가하고 학생 창에서 선택할 것입니다.우선, 이 주에 두 개의 새로운 속성을 추가하여 우리의 새로운 요소의 데이터, 즉 성별과 주를 저장합니다.
<label>Gender: </label>
<label>Male</label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender === "male"}
onChange={this.onChangeHandler}
/>
<label>Female</label>
<input
type="radio"
name="gender"
value="female"
checked={this.state.gender === "female"}
onChange={this.onChangeHandler}
/>
<br />
<br />
<label>State: </label>
<select
name="state"
value={this.state.state}
onChange={this.onChangeHandler}
>
<option value="Maharashtra">Maharashtra</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Karnataka">Karnataka</option>
<option value="West Bengal">West Bengal</option>
</select>
onChangeHandler(e){
this.setState({
[e.target.name]: e.target.value
})
}
import React, { Component } from "react";
class ControlledFormComponent extends Component {
constructor(props) {
super(props);
this.state = {
studentName: "",
gender: "",
state: "Maharashtra"
};
this.onChangeHandler = this.onChangeHandler.bind(this);
}
onChangeHandler(e) {
this.setState({
[e.target.name]: e.target.value
});
}
render() {
return (
<div>
<h3>Controlled Component</h3>
<br />
<form>
<label>Student Name: </label>
<input
type="text"
name="studentName"
placeholder="enter student name"
onChange={this.onChangeHandler}
/>
<br />
<br />
<label>Gender: </label>
<label>Male</label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender === "male"}
onChange={this.onChangeHandler}
/>
<label>Female</label>
<input
type="radio"
name="gender"
value="female"
checked={this.state.gender === "female"}
onChange={this.onChangeHandler}
/>
<br />
<br />
<label>State: </label>
<select
name="state"
value={this.state.state}
onChange={this.onChangeHandler}
>
<option value="Maharashtra">Maharashtra</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Karnataka">Karnataka</option>
<option value="West Bengal">West Bengal</option>
</select>
</form>
<br />
<hr />
<p>State of Component</p>
<pre>{JSON.stringify(this.state, null, 2)}</pre>
</div>
);
}
}
export default ControlledFormComponent;
React 연결 사용
React 연결을 사용하여 양식 상태를 처리할 수도 있습니다.이를 위해, 우리는 기능 구성 요소에 상태를 저장하는 데 사용할 갈고리가 있다.
현재, 우리는 입력 요소를 가진 간단한 표를 만들고 갈고리로 데이터를 처리할 것이다.
import React, { useState } from 'react';
export default function ControlledFormWithHook() {
const [name, setName] = useState('');
return (
<div>
<form>
<label>Name:</label>
<input type="text" onChange={(e) => setName(e.target.value)} />
</form>
<br />
Name is: {name}
</div>
);
}
useState() 갈고리를 사용하여 상태를 처리했다.
관리되지 않는 어셈블리 테이블 사용
HTML 요소가 자신의 상태를 유지하고 입력 값이 변경될 때 상태를 업데이트하는 것을 알고 있습니다.따라서 구성 요소 상태를 유지하지 않고 HTML 요소의 값에 직접 액세스할 수 있습니다.데이터가 DOM 요소에 의해 처리될 때 이를 비제어 구성 요소라고 할 수 있습니다.React는 DOM 요소에 대한 참조를 직접 가져옵니다
useState().따라서 제어되지 않는 상태에서 구성 요소는 구성 요소 상태가 아니라 DOM에 저장됩니다.경우에 따라 비관리 구성 요소를 사용해야 합니다. 예를 들어 파일 선택 기능을 추가하려는 경우 ref 입니다.이제 관리 대상 구성 요소에서 동일한 예시를 구현하고 "React"를 사용하여 관리 대상 구성 요소를 사용하지 않는 것으로 변경합니다.createRef()'API.
최종 코드:
import React, { Component } from "react";
export default function UncontrolledFormComponent() {
let inputRef = React.createRef();
let name = "";
const handleClick = e => {
e.preventDefault();
alert("Name is: " + inputRef.current.value);
};
return (
<div>
<h3>Uncontrolled Form Component</h3>
<form>
<input type="text" ref={inputRef} />
<button style={{ margin: "8px" }} onClick={handleClick}>
Submit
</button>
</form>
</div>
);
}
react에서 참조한 문헌에 대한 자세한 내용은 다음 기사를 참조하십시오.
React에서 참조를 만드는 다른 방법
수미트 카시・ 2월 1일・ 4분 읽기
#react
#webdev
#javascript
#beginners
React의 전달 참조
수미트 카시・ 2월 11일・ 4분 읽기
#react
#webdev
#javascript
#beginners
결론
본고에서 저는 React JS의 폼을 설명하고 React에서 폼을 처리하는 다른 방법을 토론했습니다.
나는 정말 네가 이 글을 좋아해서 친구에게 나누기를 바란다. 망설이지 말고 너의 생각이나 의견을 나에게 주어라.
너는 트위터에서 나를 팔로우할 수 있다
즐거운 인코딩!
Reference
이 문제에 관하여(반응 중의 형식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sumitkharche/forms-in-react-1f7a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
