양식 입력 필드 지우기 및 재설정
다양한 입력란과 2개의 버튼이 포함된 폼이 있습니다.하나는 제출용, 다른 하나는 취소용입니다.
<form id="create-course-form">
<input type="text" name="course_Name" ref="fieldName">
<input type="text" name="course_org" ref="fieldOrg">
<input type="text" name="course_Number" ref="fieldNum">
<input type="submit" name="saveCourse" value="Create">
<input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse}>
</form>
제가 원하는 것은 취소 버튼을 클릭했을 때 모든 입력을 비우는 것입니다.지금까지 각 입력의 참조 소품을 사용하여 이 작업을 수행해 왔습니다.
cancelCourse(){
this.refs.fieldName.value="";
this.refs.fieldorg.value="";
this.refs.fieldNum.value="";
}
싶습니다.jQuery라고 합니다. $('#create-course-form input[type=text]').val('');
여기서의 답은 입력이 제어되는지 여부에 따라 달라집니다.이에 대해 확실하지 않거나 자세한 정보가 필요한 경우 제어된 컴포넌트 및 제어되지 않은 컴포넌트에 대한 공식 문서를 참조하십시오.링크를 제공해 주셔서 @Dan-Esparza에 감사드립니다.
또한 에서의 문자열 리터럴 사용은 권장되지 않습니다.대신 표준 콜백 방식을 사용합니다.
제어되지 않은 필드를 사용하여 양식 지우기
각 양식 필드가 아닌 전체 양식을 지울 수 있습니다.
cancelCourse = () => {
document.getElementById("create-course-form").reset();
}
render() {
return (
<form id="create-course-form">
<input />
<input />
...
<input />
</form>
);
}
음음음음음이 id할 수 .ref아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.
cancelCourse = () => {
this.myFormRef.reset();
}
render() {
return (
<form ref={(el) => this.myFormRef = el;}>
<input />
<input />
...
<input />
</form>
);
}
제어 필드를 사용하여 양식 지우기
제어된 양식 필드를 사용하는 경우 값이 상태에 저장되는 방법에 따라 양식 내의 각 구성요소를 명시적으로 재설정해야 할 수 있습니다.
개별적으로 선언되어 있는 경우는, 각각을 명시적으로 리셋 할 필요가 있습니다.
cancelCourse = () => {
this.setState({
inputVal_1: "",
inputVal_2: "",
...
inputVal_n: "",
});
}
render() {
return (
<input value={this.state.inputVal_1} onChange={this.handleInput1Change}>
<input value={this.state.inputVal_2} onChange={this.handleInput2Change}>
...
<input value={this.state.inputVal_n} onChange={this.handleInputnChange}>
);
}
아래 데모:
class MyApp extends React.Component {
constructor() {
super();
this.state = {
inputVal_1: "",
inputVal_2: "",
inputVal_3: "",
inputVal_4: "",
inputVal_5: "",
inputVal_6: "",
inputVal_7: "",
inputVal_8: "",
inputVal_9: "",
inputVal_10: ""
};
}
handleInput1Change = (e) => {
this.setState({inputVal_1: e.target.value});
}
handleInput2Change = (e) => {
this.setState({inputVal_2: e.target.value});
}
handleInput3Change = (e) => {
this.setState({inputVal_3: e.target.value});
}
handleInput4Change = (e) => {
this.setState({inputVal_4: e.target.value});
}
handleInput5Change = (e) => {
this.setState({inputVal_5: e.target.value});
}
handleInput6Change = (e) => {
this.setState({inputVal_6: e.target.value});
}
handleInput7Change = (e) => {
this.setState({inputVal_7: e.target.value});
}
handleInput8Change = (e) => {
this.setState({inputVal_8: e.target.value});
}
handleInput9Change = (e) => {
this.setState({inputVal_9: e.target.value});
}
handleInput10Change = (e) => {
this.setState({inputVal_10: e.target.value});
}
cancelCourse = () => {
this.setState({
inputVal_1: "",
inputVal_2: "",
inputVal_3: "",
inputVal_4: "",
inputVal_5: "",
inputVal_6: "",
inputVal_7: "",
inputVal_8: "",
inputVal_9: "",
inputVal_10: ""
});
}
render() {
return (
<form>
<input value={this.state.inputVal_1} onChange={this.handleInput1Change} />
<input value={this.state.inputVal_2} onChange={this.handleInput2Change} />
<input value={this.state.inputVal_3} onChange={this.handleInput3Change} />
<input value={this.state.inputVal_4} onChange={this.handleInput4Change} />
<input value={this.state.inputVal_5} onChange={this.handleInput5Change} />
<input value={this.state.inputVal_6} onChange={this.handleInput6Change} />
<input value={this.state.inputVal_7} onChange={this.handleInput7Change} />
<input value={this.state.inputVal_8} onChange={this.handleInput8Change} />
<input value={this.state.inputVal_9} onChange={this.handleInput9Change} />
<input value={this.state.inputVal_10} onChange={this.handleInput10Change} />
<input type="submit" name="saveCourse" value="Create" />
<input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
</form>
);
}
}
ReactDOM.render(<MyApp />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>하지만 더 깔끔한 방법이 있습니다. 있는 n 및 " " " 입니다.n이벤트 핸들러(입력마다 1개씩), 현명한 코딩으로 코드를 극적으로 줄일 수 있습니다.
생성자에서는 입력 값을 유지하는 데 사용되는 빈 개체를 선언합니다.1개의 입력 핸들러만 사용하여 값을 변경할 입력 요소의 인덱스를 전달합니다.즉, 개별 입력의 값은 입력을 시작하는 순간 생성됩니다.
폼을 리셋하려면 입력 객체를 다시 빈 상태로 설정해야 합니다.
은 「」입니다.this.state.inputVal[i].i존재하지 않습니다(아직 입력에 아무것도 입력하지 않았습니다). 값을 빈 문자열(null)로 합니다.
cancelCourse = () => {
this.setState({inputVal: {}});
}
render() {
return (
<form>
{[...Array(n)].map(
(item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />
)}
</form>
);
}
아래 데모:
class MyApp extends React.Component {
constructor() {
super();
this.state = {
inputVal: {}
};
}
handleInputChange = (idx, {target}) => {
this.setState(({inputVal}) => {
inputVal[idx] = target.value;
return inputVal;
});
}
cancelCourse = () => {
this.setState({inputVal: {}});
}
render() {
return(
<form>
{[...Array(10)].map( //create an array with a length of 10
(item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} /> //bind the index to the input handler
)}
<input type="submit" name="saveCourse" value="Create" />
<input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
</form>
);
}
}
ReactDOM.render(<MyApp />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>매우 간단:
handleSubmit(e){
e.preventDefault();
e.target.reset();
}// If using class component
<form onSubmit={this.handleSubmit.bind(this)}>
...
</form>
// If using function component
<form onSubmit={handleSubmit}>
...
</form>「」를 사용합니다.event.target.reset()는 제어되지 않은 컴포넌트에 대해서만 동작합니다.이는 권장되지 않습니다.제어된 컴포넌트의 경우 다음과 같은 작업을 수행합니다.
import React, { Component } from 'react'
class MyForm extends Component {
initialState = { name: '' }
state = this.initialState
handleFormReset = () => {
this.setState(() => this.initialState)
}
render() {
return (
<form onReset={this.handleFormReset}>
<div>
<label htmlFor="name">Name</label>
<input
type="text"
placeholder="Enter name"
name="name"
value={name}
onChange={this.handleInputOnChange}
/>
</div>
<div>
<input
type="submit"
value="Submit"
/>
<input
type="reset"
value="Reset"
/>
</div>
</form>
)
}
}
ContactAdd.propTypes = {}
export default MyForm
, , 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「」anything.target.reset()★★★★★★★★★★★★★★★★★★★★★★★★★★★★!
handleSubmit(e){
e.preventDefault();
e.target.reset();
}
<form onSubmit={this.handleSubmit}>
...
</form>
위 Chris의 답변은 최신 React 훅을 사용하여 갱신되었습니다.
개괄적인 아이디어입니다.양식은 Controlled 컴포넌트 또는 UnControlled 컴포넌트 중 하나입니다.
제어되지 않는 컴포넌트:
제어되지 않은 컴포넌트는 상태 관리를 브라우저에 맡깁니다.즉, 양식 입력을 재설정하도록 브라우저에 요청해야 합니다.이를 수행하려면 폼 요소를 참조로 캡처한 후submit()메서드를 사용합니다.
export default function Form() {
const ref = React.useRef();
function reset(ev) {
ev.preventDefault();
ref.current.reset();
}
return (
<form ref={ref}>
<label htmlFor="email">Email Address</label>
<input id="email" type="email" name="email" />
<label htmlFor="message">Message</label>
<textarea id="message" name="message" />
<button type="submit">Submit</button>
<button onClick={reset}>Reset</button>
</form>
);
}
제어된 컴포넌트:
제어된 구성 요소를 사용하면 React에서 상태를 관리할 수 있습니다.즉, 초기 상태를 생성하여 입력이 변경될 때마다 업데이트해야 합니다.이 세계에서 폼을 리셋하는 것은 폼 상태를 초기 상태로 되돌리는 것에 불과합니다.
export default function Form() {
const [state, setState] = React.useState({ email: "", message: "" });
function reset(ev) {
ev.preventDefault();
setState({ email: "", message: "" });
}
return (
<form className="Form">
<label htmlFor="email">Email Address</label>
<input
id="email"
type="email"
name="email"
value={state.email}
onChange={(ev) => {
setState({ ...state, email: ev.target.value });
}}
/>
<label htmlFor="message">Message</label>
<textarea
id="message"
name="message"
value={state.message}
onChange={(ev) => {
setState({ ...state, message: ev.target.value });
}}
/>
<button type="submit">Submit</button>
<button onClick={reset}>Reset</button>
</form>
);
}
https://codesandbox.io/s/reactformreset-10cjn3의 완전한 예
다음 코드는 한 번의 클릭으로 폼을 리셋합니다.
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleSubmit(e){
this.refs.form.reset();
}
render(){
return(
<div>
<form onSubmit={this.handleSubmit} ref="form">
<input type="text" placeholder="First Name!" ref='firstName'/><br/<br/>
<input type="text" placeholder="Last Name!" ref='lastName'/><br/><br/>
<button type="submit" >submit</button>
</form>
</div>
}
}폼의 요소 값이 자신의 주에 저장되어 있음을 인정한 폼을 클리어하기 위해 다음과 같이 자신의 상태를 매핑할 수 있습니다.
// clear all your form
Object.keys(this.state).map((key, index) => {
this.setState({[key] : ""});
});
폼이 다른 필드에 있는 경우 다음과 같이 해당 폼을 주의 특정 필드에 삽입할 수 있습니다.
state={
form: {
name:"",
email:""}
}
// handle set in nested objects
handleChange = (e) =>{
e.preventDefault();
const newState = Object.assign({}, this.state);
newState.form[e.target.name] = e.target.value;
this.setState(newState);
}
// submit and clear state in nested object
onSubmit = (e) =>{
e.preventDefault();
var form = Object.assign({}, this.state.form);
Object.keys(form).map((key, index) => {
form[key] = "" ;
});
this.setState({form})
}
폼 리셋에 가장 적합합니다.
import React, { Component } from 'react'
class MyComponent extends Component {
constructor(props){
super(props)
this.state = {
inputVal: props.inputValue
}
// preserve the initial state in a new object
this.baseState = this.state ///>>>>>>>>> note this one.
}
resetForm = () => {
this.setState(this.baseState) ///>>>>>>>>> note this one.
}
submitForm = () => {
// submit the form logic
}
updateInput = val => this.setState({ inputVal: val })
render() {
return (
<form>
<input
onChange={this.updateInput}
type="text
value={this.state.inputVal} />
<button
onClick={this.resetForm}
type="button">Cancel</button>
<button
onClick={this.submitForm}
type="submit">Submit</button>
</form>
)
}
}
'이벤트가 인수로 됩니다.handleSubmit및 「」에 할 수 는,<form>: " " " 라고 합니다.event.target 의 메서드를 사용하여 됩니다.form() 형식의 메서드를 사용하여 폼을 리셋하면 됩니다.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
handleSubmit = (event)=>{
event.preventDefault()
....
event.target.reset()
}
render() {
return (
<>
<form onSubmit={this.handleSubmit}>
<label htmlFor='movieTitle'>Title</label>
<input name='movieTitle' id='movieTitle' type='text' />
<input type='submit' value='Find Movie Info' />
</form>
</>
)
}
나는 이것이 여전히 관련이 있는지 모르겠다.하지만 비슷한 문제가 생겼을 때 이렇게 해결했습니다.
관리되지 않은 폼을 클리어할 필요가 있는 경우는, 송신 후에 간단하게 실행할 수 있습니다.
this.<ref-name-goes-here>.setState({value: ''});
이게 도움이 됐으면 좋겠다.
import React, { Component } from 'react'
export default class Form extends Component {
constructor(props) {
super(props)
this.formRef = React.createRef()
this.state = {
email: '',
loading: false,
eror: null
}
}
reset = () => {
this.formRef.current.reset()
}
render() {
return (
<div>
<form>
<input type="email" name="" id=""/>
<button type="submit">Submit</button>
<button onClick={()=>this.reset()}>Reset</button>
</form>
</div>
)
}
}/* 모든 상태를 리셋하려면 newState를 참조하고 eventSubmit()에서 사용합니다.나는 그것이 나에게 효과가 있는지 테스트했다.실수가 있으면 알려주세요 */
import React from 'react';
const newState = {
fullname: '',
email: ''
}
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
fullname: ' ',
email: ' '
}
this.eventChange = this
.eventChange
.bind(this);
this.eventSubmit = this
.eventSubmit
.bind(this);
}
eventChange(event) {
const target = event.target;
const value = target.type === 'checkbox'
? target.type
: target.value;
const name = target.name;
this.setState({[name]: value})
}
eventSubmit(event) {
alert(JSON.stringify(this.state))
event.preventDefault();
this.setState({...newState});
}
render() {
return (
<div className="container">
<form className="row mt-5" onSubmit={this.eventSubmit}>
<label className="col-md-12">
Full Name
<input
type="text"
name="fullname"
id="fullname"
value={this.state.fullname}
onChange={this.eventChange}/>
</label>
<label className="col-md-12">
email
<input
type="text"
name="email"
id="email"
value={this.state.value}
onChange={this.eventChange}/>
</label>
<input type="submit" value="Submit"/>
</form>
</div>
)
}
}
export default Form;
가장 쉬운 방법은 HTML만으로 정기적으로 실행하는 것이며 버튼 타입의 "reset"을 사용하면 반응하는 어떤 것도 전혀 문제 삼을 필요가 없습니다. 상태도, 아무것도 없습니다.
import React, {useState} from 'react'
function HowReactWorks() {
return (
<div>
<form>
<div>
<label for="name">Name</label>
<input type="text" id="name" placeholder="name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" placeholder="password" />
</div>
<button type="reset">Reset</button>
<button>Submit</button>
</form>
</div>
)
}
export default HowReactWorks
- HTML을 반응에 포함하는 방법을 모르는 사람들을 위해 편집됨
이 방법도 사용할 수 있습니다.
const resetData = (e) => {
e.preventDefault();
settitle("");
setdate("");
};
<input type="text" onChange={(e) => settitle(e.target.value)} value={title} />
<input type="date" onChange={(e) => setdate(e.target.value)} value={date} />
<button onClick={resetData}>Reset Data</button>
자녀 제어 입력 컴포넌트의 리셋을 트리거하는 부모 컴포넌트의 경우, 다음과 같은 솔루션이 도움이 되었습니다.
const ParentComponent = () => {
const [reset, setReset] = useState()
const submitHandler = (e) => {
e.preventDefault()
//do your stuff
setReset(Date.now()) // pass some value to trigger update
}
return (
<form onSubmit={submitHandler}>
<ChildInputComponent reset={reset} />
<ChildInputComponent reset={reset} />
</form>
)
}
const ChildInputComponent = ({reset}) => {
const [value, setValue] = useState()
useEffect(() => {
setValue('')
}, [reset])
return <input value={value} onChange={(e) => setValue(e.target.value)} />
}
선언한 경우
const [inputs, setInputs] = useState([]);
여러 매개 변수로서.실제로 다음 구문을 사용하여 항목을 리셋할 수 있습니다.
setInputs([]);
만약을 위해 handleChange를 이렇게 정의합니다.
이 양식을 사용하거나 원하는 방식으로 사용할 수 있습니다.
const handleChange = (event) => {
const name = event.target.name;
const email = event.target.email;
const message = event.target.message;
const value = event.target.value;
setInputs(values => ({...values, [name]: value, [email]: value, [message]: value}))
}
이 양식을 예로 사용할 수 있습니다.
<form onSubmit={handleSubmit}>
<div className="fields">
<div className="field half">
<label for="name">Name</label>
<input value={inputs.name || ''} type="text" name="name" id="nameId" onChange={handleChange} maxLength="30" />
</div>
<div className="field half">
<label for="email">Email</label>
<input value={inputs.email || ''} type="text" name="email" id="emailId" onChange={handleChange} maxLength="40"/>
</div>
<div className="field">
<label for="message">Message</label>
<textarea value={inputs.message || ''} name="message" id="messageId" rows="6" onChange={handleChange} maxLength="400" />
</div>
</div>
<ul className="actions">
<li><input type="submit" value="Send Message" className="primary" /></li>
<li><input onClick={resetDetails} type="reset" value="Clear" /></li>
</ul>
</form>
이것은 단지 양식을 선언하는 많은 방법 중 하나일 뿐이다.행운을 빕니다.
const onReset = () => {
form.resetFields();
};
state={
name:"",
email:""
}
handalSubmit = () => {
after api call
let resetFrom = {}
fetch('url')
.then(function(response) {
if(response.success){
resetFrom{
name:"",
email:""
}
}
})
this.setState({...resetFrom})
}
다음과 같은 HTML 제어 항목을 사용하는 이유는 무엇입니까?<input type="reset">
언급URL : https://stackoverflow.com/questions/43922508/clear-and-reset-form-input-fields
'programing' 카테고리의 다른 글
| angularjs의 배수는 $http입니다.요구를 받다 (0) | 2023.03.11 |
|---|---|
| Reactjs에 setState()의 동기 대체가 있습니까? (0) | 2023.03.11 |
| WordPress - 사용자 정의 500 서버 오류 페이지를 추가하는 방법 (0) | 2023.03.11 |
| JSON 키는 따옴표로 둘러싸야 합니까? (0) | 2023.03.11 |
| angularjs 장치 테스트에서 키 업/키 다운 이벤트를 트리거하려면 어떻게 해야 합니까? (0) | 2023.03.11 |