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

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

您不会通过onChange事件在不要这样做上的每个单个更改中提交表单数据。

对于您的情况，您需要有一个动作创建者，该创建者使用受控组件状态中的数据并将其发送到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

顺便说一句，这就是我对这个问题的解决方案，根据我的反应经验，我在一些项目中使用了它，到目前为止效果很好，我说这可能不会是最好的解决方案，但是它有效！：）

在Redux中重置输入文本

1 个答案: