私のケースでは、送信をクリックした後に入力フィールドを消去するにはどうすればよいですか？

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: '', 
    }); 
}