提交後清除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}>。

多選測驗組件是一個非常有趣的想法。我甚至可以編寫一個例子。