没有redux-form清除表单的正确方法

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 操作？

注意：我宁愿不使用 redux-form 包。

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