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

我的问题是：

提交表格后清除表格的正确“还原方式”是什么？我是否需要发送不同的操作，还是应该使用现有的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;
  }
}

正确的方式清除表单而不使用redux-form

1 个答案: