送信後にReduxフォームをクリアする - 複数のラジオボタン

Question

多分私はこの間違った方法について考えていますが、フォームをリセットする簡単な方法があるかどうか、すべてのラジオボタンをオフにしていますか？レンダリングする質問はさまざまですが、私はdynamic 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); 

Answer 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}>とすることができます。

複数の選択肢のクイズコンポーネントは、かなり興味深い考えです。私はそれを行う例をコード化するかもしれません。