사례에서 제출을 클릭 한 후 입력 필드를 반제 할 수 있습니까?

Question

사람은 내 홈페이지의 구성 요소에 제출을 클릭하면 모든 입력을 취소하는 방법을 말해 주실 래요? SubjectForm 구성 요소에서 preventdefault 다음에 reset()을 사용했지만, 잘못 사용했거나 작동하지 않았습니다. 또한 setState를 사용하여 입력 내용을 비어있는 기본 상태로 되 돌리려고했지만 작동하지 않았습니다. 내 코드에서

모든 것이 잘 작동하지만 내가 주제를 제출할 때마다, 필드는 자체

이 내 홈페이지의 구성 요소를 삭제하지 않습니다.

import React from 'react'; 
    import SubjectForm from './SubjectForm'; 
    import {addSubject} from '../actions/subjectAction'; 
    import {connect} from 'react-redux'; 

    const HomePage=({dispatch})=>(
     <div> 
      <SubjectForm onSubmit ={(subject)=> 
        dispatch(addSubject(subject)) 
      }/> 
</div> 
    ) 

    export default connect()(HomePage); 

이 내 subjectForm 구성 요소입니다

import React from 'react'; 

export default class SubjectForm extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state={...} 
    onNameChange =(e)=>{...} 
    onHourChange =(e)=>{...} 

    onSubmit=(e)=>{ 
     e.preventDefault(); 

     **//I tried using reset() here but it did not work** 

     if(!this.state.subjectName){...} 

    render(){ 
     return (
      <div> 
       {this.state.error && <p>{this.state.error}</p>} 
       <form className='test' onSubmit={this.onSubmit}> 
        <input 
         type="text" 
         placeholder='enter name' 
         autoFocus 
         value={this.state.subjectName} 
         onChange={this.onNameChange} 
        /> 
        <input 
         type="number" 
         placeholder='enter hour' 
         value={this.state.hour} 
         onChange={this.onHourChange} 
        /> 
        <button>Add Subject</button> 
       </form> 
      </div> 
     ) 
    } 
} 

나는 빈에 따라 반환하려고 할 때이 내 onSubmit 기능입니다. 당신이 입력 필드를 제어 할 상태를 사용하고 있기 때문에

onSubmit=(e)=>{ 
    e.preventDefault(); 
    if(!this.state.subjectName){ 
     this.setState(()=>({error:'please enter subject name'})) 
    } 
    else if(!this.state.hour && !this.state.minute){ 
     this.setState(()=>({error:'please enter time'})) 
    }else { 
     this.setState(()=>({error:''})); 
     this.props.onSubmit({ 
      subjectName:this.state.subjectName, 
      hour:this.state.hour, 
      minute:this.state.minute, 
      note:this.state.note 
     }, console.log(this.state), 
     ) 
     this.setState(()=>({ 
      subjectName:'', 
      hour:0, 
      minute:0, 
      note:'', 
      error:'' 
     })); 
    } 
} 

Answer 1

, 당신은 state.field 재설정해야하며 필드를 재설정합니다. 그래서 (! this.state.subjectName)

onSubmit=(e)=>{ 
    e.preventDefault(); 

    **//I tried using reset() here but it did not work** 

    if(!this.state.subjectName){...} 

    // after finishing all you want to do with it: 
    this.setState({ 
     hour: '', // or any other initial value you have 
     subjectName: '', 
    }); 
}