Wie kann ich das Eingabefeld deaktivieren, nachdem ich in meinem Fall auf "Senden" geklickt habe?

Question

Kann mir bitte jemand sagen, wie man alle Eingaben löscht, nachdem ich auf meine Homepage-Komponente klicken? Ich versuchte mit Reset() nach preventdefault in der subjectForm-Komponente, aber entweder ich falsch verwendet oder es hat nicht funktioniert. Ich habe auch versucht, setState zu verwenden und meine Eingaben in den Standardzustand zurückzusetzen, der leer ist, aber es hat auch nicht funktioniert.

alles in meinem Code funktioniert gut, aber jedes Mal, wenn ich ein Thema einreichen, wird das Feld selbst nicht

löscht dies ist meine Homepage Komponente.

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); 

das ist mein subjectForm Komponente

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> 
     ) 
    } 
} 

das ist meine onSubmit Funktion als ich versuchte zu leeren Thema zurückzukehren.

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

Da Sie Ihren Zustand werden mit Hilfe der Eingabefelder zu steuern, sollten Sie die state.field zurückgesetzt und es wird das Feld zurückgesetzt. Also: (! 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: '', 
    }); 
}