Basic Respect 폼 제출 시 페이지 전체가 갱신됩니다.
컴포넌트의 상태 변수에 정보를 저장하고 그 변수를 화면에 출력하는 입력 양식을 작성하려고 합니다.통제된 컴포넌트에 대한 문서를 읽었는데, 그게 바로 제가 시도하고 있는 겁니다.
여기서의 주된 문제는, 「전송」을 클릭하면, 올바른 텍스트가 화면에 표시되지만, 그 후에 페이지 전체가 갱신되어 이유를 알 수 없다는 것입니다.제가 인터넷에서 읽은 바로는refs솔루션인 것처럼 보이지만, 제가 아는 바로는 그 컴포넌트나 제어 컴포넌트 중 하나를 사용할 수 있다는 것입니다.
class InputField extends React.Component {
constructor(props) {
super(props);
this.state = {
itemName: "",
storedItemName: "",
};
this.handleNameChange = this.handleNameChange.bind(this);
this.afterSubmission = this.afterSubmission.bind(this);
}
handleNameChange(event) {
this.setState({
itemName: event.target.value
});
}
afterSubmission(event) {
let name = this.state.itemName;
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName); // Shows the right value!
});
}
render() {
return(
<div>
<form onSubmit = {this.afterSubmission}>
<label> Item Name:
<input
type = "text"
name = "itemName"
value = {this.state.itemName}
onChange = {this.handleNameChange}
/></label>
<input type = "submit" value = "Submit" />
</form>
<div className = "itemList">
<p>Hi</p>
{this.state.storedItemName}
</div>
</div>
);
}
그냥 전화하세요.event.preventDefault폼의 디폴트 동작을 방지하는 방법
afterSubmission(event) {
event.preventDefault();
let name = this.state.itemName;
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName); // Shows the right value!
}
}
기본 동작을 방지합니다.
afterSubmission(event) {
event.preventDefault();
let name = this.state.itemName;
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName); // Shows the right value!
});
}
기본 React 폼 제출이 페이지 전체를 새로 고치지 않도록 e.provent Default를 호출합니다.이벤트 핸들러로 설정합니다.
예를 들어 다음과 같이 기술합니다.
import React from "react";
export default function App() {
const onSubmit = (e) => {
e.preventDefault();
console.log("refresh prevented");
};
return (
<div>
<form onSubmit={onSubmit}>
<button type="submit">submit</button>
</form>
</div>
);
}
onSubmit 프로포트의 값으로 설정된 onSubmit 함수를 만듭니다.
이 함수에서는 e.proventDefault를 호출하여 기본 전송 동작을 방지합니다.즉, 서버측 폼 전송이 실행되어 페이지 전체가 갱신됩니다.
양식에는 양식 제출을 위한 제출 버튼이 있습니다.
따라서 [Submit]를 클릭했을 때 페이지 새로고침이 표시되지 않고 콘솔에 기록되는 'refresh prevented' 문자열이 표시됩니다.
여기에는 다음 3가지 방법이 있습니다.
첫 번째 방법
사용방법event.preventDefault();기능.
- 폼 전송에 onSubmit() 이벤트를 사용하는 경우 이 이벤트의 기본 동작은 브라우저를 새로 고치고 새로운 html 페이지를 렌더링하는 것입니다.
- onSubmit 이벤트의 페이지 새로 고침 기본 동작을 방지하기 위해 event.preventDefault(); onSubmit 이벤트를 호출하는 함수 안에 넣습니다.
입력 필드.js
class InputField extends React.Component {
state = {
itemName: "",
storedItemName: "",
}
handleNameChange = (event) => {
const { name,value } = event.target;
//we can't write this.setState({name:value}) this will set name as the key we need value of the name which is itemName
this.setState({
[name] : value //itemName:"the text we will enter"
});
}
afterSubmission = (event) => {
event.preventDefault();
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName);
});
}
render() {
return(
<div>
<form onSubmit = {this.afterSubmission}>
<label> Item Name:
<input
onChange = {this.handleNameChange}
type = "text"
name = "itemName"
value = {this.state.itemName}
/>
</label>
<input type = "submit" value = "Submit" />
</form>
<div className = "itemList">
<p>Hi</p>
{this.state.storedItemName}
</div>
</div>
);
}
}
export default InputField;
세컨드웨이
폼 요소에서 onSubmit 이벤트를 제거하여
다음으로 입력 유형을 입력 유형으로 변경하고 onClick 이벤트를 추가합니다.
입력 필드.js
class InputField extends React.Component {
state = {
itemName: "",
storedItemName: "",
}
handleNameChange = (event) => {
console.log(this);
const { name,value } = event.target;
this.setState({
[name] : value
});
}
afterSubmission = () => {
this.setState ({
storedItemName:this.state.itemName
}, function() {
alert(this.state.storedItemName);
});
}
render() {
return(
<div>
<form>
<label> Item Name:
<input
onChange = {this.handleNameChange}
type = "text"
name = "itemName"
value = {this.state.itemName}
/>
</label>
<input
type = "button"
onClick={this.afterSubmission}
value = "Submit"
/>
</form>
<div className = "itemList">
<p>Hi</p>
{this.state.storedItemName}
</div>
</div>
);
}
}
export default InputField;
서드웨이
리액트 폼 훅(https://www.react-hook-form.com/))을 사용하여
- 문서에 따르면 개발 서버에 npm 모듈을 설치해야 합니다.
npm install react-hook-form
입력 필드.js
import InputFieldForm from 'location specified';
class InputField extends React.Component {
render() {
return(
<div>
<InputFieldForm />
</div>
);
}
}
export default InputField;
Input Field Form.js
import React from "react";
import { useForm } from "react-hook-form";
const InputFieldForm = () =>{
const onSubmit = (formData) =>{
alert(JSON.stringify(formData));
console.log(formData);
}
const { register, handleSubmit } = useForm();
return(
<form onSubmit = {handleSubmit(onSubmit)}>
<label> Item Name:
<input
{...register('itemName')}
type = "text"
name = "itemName"
/>
</label>
<input type = "submit" value = "Submit" />
</form>
)
}
export default InputFieldForm;
언급URL : https://stackoverflow.com/questions/50193227/basic-react-form-submit-refreshes-entire-page
'source' 카테고리의 다른 글
| JavaScript 최대 Blob 크기에 제한이 있습니까? (0) | 2023.02.22 |
|---|---|
| JSX react/react-in-jsx-scope를 사용할 때 'React'가 범위에 있어야 합니까? (0) | 2023.02.22 |
| React-Router v4+로 페이지 제목을 변경할 수 있는 방법이 있습니까? (0) | 2023.02.22 |
| 엔티티 없이 스프링 저장소 생성 (0) | 2023.02.22 |
| Woocommerce - woocommerce_locate_template 대체 수단 (0) | 2023.02.22 |