在 redux 中重置输入文本

Question

我发现了很多关于该主题的问题，但我找不到与我的完全一样的示例。单击按钮添加用户后，我尝试重置输入值。如何在带有受控组件的 redux 中做到这一点？ 我的代码： 组件：

class Userlist extends Component {
    constructor(props) {
      super(props)

      this.state = {
         data: this.props.ui.users
      }
    }


    render() {
      console.log(this.props)
      return (
        <div>
          <input type="text"
                 value={this.props.ui.inputName}
                 name="username"
                 onChange={(e) => this.props.uiActions.handleNameChange(e.target.value)}/>
          <input type="text" 
                value={this.props.ui.inputEmail}
                name="email"
                onChange={(e) => this.props.uiActions.handleEmailChange(e.target.value)}/>
        <table>
        <thead>
          <tr>
            <th>LP</th>
            <th>USER</th>
            <th>E-MAIL</th>
          </tr>
        </thead>
        <tbody>
        {this.props.ui.users.map((item, index) => {
        return (
                <tr key={index}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.email}</td>
                </tr>
        )
      })}
        </tbody>
        <tfoot>
        </tfoot>
        <button onClick={() => this.props.uiActions.addUser(this.state.username)}>add</button>
      </table>
      </div>
      )
    }
}

function mapDispatchToProps(dispatch) {
    return {
      uiActions: bindActionCreators(UI_ACTIONS, dispatch)
    };
  }

function mapStateToProps(state) {
    return {
      ui: state.ui
    };
  }

export default connect(mapStateToProps, mapDispatchToProps)(Userlist);

我处理输入/添加用户的操作： https://github.com/KamilStaszewski/crudapp/blob/develop/src/actions/ui_actions.js

const initialState = { 
  users: [],
  name: '',
  email: '',
  inputName: undefined,
  inputEmail: undefined
}

export default (state = initialState, action) => {
  switch (action.type) {
  case UI_ACTIONS.SET_REPOS: 
    return { ...state, users: action.users };
  case UI_ACTIONS.ADD_USER:
    return {...state, users: action.users, inputName: '', inputEmail: '' };
  case UI_ACTIONS.UPDATE_NAME:
    return {...state, name: action.val };
  case UI_ACTIONS.UPDATE_EMAIL:
    return {...state, email: action.val};
  default:
    return state;
  }
};

我知道受控/不受控输入存在问题。我也想在 redux 中重置输入，因为即使单击按钮后输入值消失，但如果您第二次使用相同的值单击它，这些值仍然存在。如何正确重置？我想以正确的方式去做。谢谢。

Answer 1

基本上，受控组件意味着您将表单输入（文本输入、密码输入、复选框等...）粘贴到组件的状态，并且在提交表单时，您将通过 动作创建者到redux。

您不会在每次更改时通过 onChange 事件提交表单数据 m 不要这样做这是错误的。

对于您的情况，您需要有一个动作创建者，它使用来自受控组件状态的数据并将其发送到 redux：

... some code 

formsubmission() {

  const { username, password, email } = this.state
  const { sendFormData } = this.props

  const _data = {
    username,
    password,
    email,
    // and basically whatever data that you want to save to redux
  }

  const _resetData = {
    username: '',
    password: '',
    email: '',
    // and other data
  }

  // save to redux => based on your condition you can send the _resetData to reset form data on redux
  sendFormData(_data)  // or send _resetData

  // and finally you know that you can pass event to the function and reset the value of inputs by that
}

... some more code 

顺便说一句，这是我根据我的 react 经验得出的解决这个问题的方法，我在我的一些项目中使用了它，到目前为止它运行良好，我说它可能不会是最好的解决方案，但它的工作原理！ :)