Сброс входного текста в редуксе - PullRequest
Новая
       8

Сброс входного текста в редуксе

0 голосов
/ 20 сентября 2018

Я нашел много вопросов на эту тему, но я не смог найти пример, который был бы точно таким же, как у меня.Я пытаюсь сбросить входные значения после нажатия кнопки Добавить пользователя.Как это сделать в редуксе с контролируемыми компонентами?Мой код: Компонент: 

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

Я знаю, что есть проблема с контролируемыми / неконтролируемыми входами.Я хочу сбросить ввод также в избыточном виде, потому что даже после нажатия кнопок значения ввода исчезают, значения остаются, если вы щелкнете по нему второй раз с теми же значениями.Как правильно сбросить?Я хочу сделать это правильно.Спасибо.

1 Ответ

0 голосов
/ 20 сентября 2018

В основном, контролируемый компонент означает, что вы приклеиваете свои данные формы (ввод текста, ввод пароля, флажки и т. Д.) К состоянию вашего компонента, и при отправке формы вы собираетесь отправить эти данные вашим * 1001.* создатель действия для редукции.

вы не собираетесь отправлять данные формы по событию onChange при каждом отдельном изменении m Не делайте этого , что неправильно.

для вашего случая вам нужно иметь создателя действий, который использует данные из состояния контролируемого компонента и отправляет их в редукс: 

... 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

, кстати, это мое решение этой проблемы, которое япришел вместе с моим опытом в реагировании, и я использовал его в некоторых своих проектах, и пока он работал хорошо, и я говорю, что это может быть не лучшим решением, но оно работает !!!:)

...