Правильный способ очистки формы без Redux-формы

Question

Это моя форма

<form className="input-group" onSubmit={this.handleSubmit}> 
    <input className="form-control" 
    type="text" 
    placeholder="Insert name" 
    autofocus="true" /> 
    <span className="input-group-btn"> 
    <button type="submit" className={classNames}>Add</button> 
    </span> 
</form> 

Это мой обработчик события:

handleSubmit(e) { 
e.preventDefault(); 
let name = e.target[0].value; 
if (name.length > 0) { 
    this.props.dispatch(createClassroom(name)); 
} 
} 

Мой вопрос:

что правильный «Redux путь «очистить форму после ее отправки? Мне нужно отправить другое действие или использовать существующее действие createClassroom?

Примечание: Я бы предпочел не использовать пакет редукционной формы.

Answer 1

Во-первых, вы должны убедиться, что <input> является controlled component, передавая ее соответствующее значение из состояния:

const { classroom } = this.props; 

// in return: 
<input type="text" value={ classroom.name } /> 

Тогда форма может быть очищен идеально подав RESET действие, которое ваш classroom редуктор действует на:

const initialState = {}; 

function classroomReducer(state = initialState, action) { 
    switch (action.type) { 
    // ... 
    case 'RESET_CLASSROOM': 
     return initialState; 
    default: 
     return state; 
    } 
}