Может быть, я иду по этому неправильному пути, но мне интересно, есть ли простой способ сбросить форму / снять все переключатели? Поскольку у меня есть переменное количество вопросов для рендеринга, я использую динамическая 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);