0

多分私はこの間違った方法をとっていますが、フォームをリセットする/すべてのラジオボタンをオフにする簡単な方法があるかどうか疑問に思っていますか? レンダリングする質問の数が可変であるため、動的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);
4

1 に答える 1