Очистить форму Redux после отправки - несколько переключателей

Может быть, я иду по этому неправильному пути, но мне интересно, есть ли простой способ сбросить форму / снять все переключатели? Поскольку у меня есть переменное количество вопросов для рендеринга, я использую динамическая Redux-форма. Я пробовал кучу разных подходов без успеха. Любые указатели будут оценены.

import React, { Component }  from 'react';
import { reduxForm } from 'redux-form';
import { saveQuiz } from '../../../actions/index';

class QuestionsTrueFalseMulti extends Component{

  constructor(props) {
    super();
    this.questions = props.questions;
    this.fields = props.fields;
    this.activity_data = props.activity_data;
  }

  onSubmit(data){
    this.props.saveQuiz(data);
    this.props.dispatch(reset('dynamic'));
  }

  render() {
    const { fields, handleSubmit, questions, activity_data } = this.props;  
    return(
      <div className="component-widget true-false-multi">
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <table>
            <thead>
            <tr>
              <td></td>
              <td>True</td>
              <td>False</td>
            </tr>
            </thead>
            <tbody>
              {this.questions.map((question, i) => {
                const field = fields['q_answer_'+question.id];
                return (
                  <tr key={i}>
                    <td>{question.name}</td>
                    {question.options.map((option) => {
                      return (
                        <td key={`O_${option.id}`}>
                          <input 
                            className="css-checkbox" 
                            type="radio" 
                            name={`${question.id}_answer`} 
                            value={option.answer} 
                            id={`${question.id}_answer${option.answer}`} 
                            {...field}
                          />
                          <label htmlFor={`${question.id}_answer${option.answer}`}  className="css-label"></label>
                        </td>
                      );
                    })}
                  </tr>
                );
              })}
            </tbody>
          </table>
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({form: 'dynamic'}, null, {saveQuiz})(QuestionsTrueFalseMulti);

person Dom Hede    schedule 27.04.2016    source источник
comment
Обновление: добавлено this.props.dispatch(reset('dynamic')); для onSubmit, но без радости...   -  person Dom Hede    schedule 27.04.2016


Ответы (1)


И вы вызываете это как...

<QuestionsTrueFalseMulti
  questions={[
    {
      id: 42,
      name: 'Is redux-form awesome?',
      options: [
        { answer: true },
        { answer: false }
      ]
    },
    {
      id: 43,
      name: 'Is the dress black and gold?',
      options: [
        { answer: 'Black and gold' },
        { answer: 'Blue and grey' }
      ]
    }
  ]}
  fields={[
    'q_answer_42'
    'q_answer_43'
  ]}
/>

? Если он не сбрасывается, похоже, вы не предоставляете массив fields.

Несколько наблюдений:

  • Нет необходимости сохранять this.fields = this.props.fields.
  • Вы можете удалить onSubmit и сделать reduxForm({form: 'dynamic'}, null, {onSubmit: saveQuiz}), а затем <form onSubmit={handleSubmit}>.

Компонент викторины с несколькими вариантами ответов — довольно интересная идея. Я мог бы даже написать пример, делающий это.

person Erik R.    schedule 27.04.2016
comment
Проголосовал просто за то, чтобы побудить вас написать такой пример! :) - person Mister Epic; 27.04.2016
comment
P.S. Я задал связанный вопрос здесь: stackoverflow.com/questions/36900129 / - person Mister Epic; 27.04.2016
comment
Спасибо @Erik R. Просто чтобы подтвердить, что отправка работает нормально. Просто интересно, как сбросить / снять все переключатели после отправки. - person Dom Hede; 28.04.2016