Javascript 如何在“redux表单”中将道具传递到装饰表单？

我正在使用

redux表单

构建向导表单，遇到了一个问题，

onClick

处理程序没有作为道具从容器组件传递到表单中

在过去的几个小时里，我一直在搜索文档，但没有结果……似乎有一种方法可以将道具传递到系统中，但我看不到任何这样的例子

以下是相关代码：

RadioButtons.js

（其中调用onClick函数）

QuestionContainer.js

（

Question.js

的包装器；决定是在屏幕上呈现多个问题还是仅呈现一个问题）。

handleClick

道具终于出现在这里了

---

箭头按钮上的
手柄点击
道具工作正常，无故障地调用
nextScreen（）
/
lastScreen（）
。只有在
QuestionContainer
中，它才不会被传递下去。
在
QuestionContainer
组件中有两个
Questions
组件的实例。当
question.component===“combined”
条件满足时，您传递的是
handleClick
属性，但不是其他属性，因此它在
Questions
组件中不可用

在else条件下，你也需要通过handleClick作为道具

const renderQuestions = question => {
    if (question.component === 'combined') {
      return (
       <div className="multi-question-container">
         <label className="multi-question-label">{question.text}</label>
         <div className="multi-question-wrapper">
           {question.subQuestions.map((subQuestion, index) => {
             const newName = `${question.name}-${subQuestion.name}`;
             const newSubQuestion = Object.assign({}, subQuestion, { name: newName })
             return (
               <Question
                 question={newSubQuestion}
                 key={index}
                 className={questionClassNames}
                 handleClick={handleClick}
               />
             )
           })}
         </div>
       </div>
      )} else {
       return (
         <Question
           question={question}
           className={questionClassNames}
           handleClick={handleClick}
         />
       )
     }
  }

const renderQuestions=question=>{
如果（question.component==='combined'）{
返回(
{问题.文本}
{问题.子问题.映射（（子问题，索引）=>{
const newName=`${question.name}-${subQuestion.name}`；
const newSubQuestion=Object.assign（{}，子问题，{name:newName}）
返回(
)
})}
)}否则{
返回(
)
}
}
正如我看到的，您在一个实例中传递它，而不是在另一个实例中传递它，因此，如果question.component未合并，它将不会被传递，而此时它将在该eQuestion组件中不可用，当然请参见
！真不敢相信我没看到这个。抢手货
const Question = props => {
  const { handleSubmit, onBlur, question, handleClick } = props;
  return (
    <div className={`question question-${question.name}`}>
      <form className={props.className} onSubmit={handleSubmit}>
        <div className="question-wrapper">
          <label className={`question-label-${question.name}`}>{question.text}</label>
          { question.image === true && question.type !== "checkbox" && question.type !== "radio" &&
            <img className="question-image" src={`/images/${question.name}.png`} />
          }
          { question.type === "radio" && <RadioButtons question={question} handleClick={handleClick} /> }
          { question.type === "range" && <Slider question={question} /> }
          { question.type !== "checkbox" && question.type !== "radio" && question.type !== "range" &&
            <Field
              component={question.component}
              type={question.type}
              name={question.name}
              placeholder={question.placeholder}
              onBlur={onBlur}
            />
          }
        </div>
      </form>
    </div>
  )
}

Question.PropTypes = {
  handleSubmit: PropTypes.func,
  onBlur: PropTypes.func,
  question: PropTypes.object.isRequired,
  handleClick: PropTypes.func,
}

export default reduxForm({
  form: 'quiz',
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
})(Question);

const QuestionContainer = props => {
  const { question, handleClick } = props;

  const questionClassNames = classNames({
    'question-wrapper': true,
    'question-single': props.question !== 'combined',
    'question-multiple': props.question === 'combined',
  });

  const renderQuestions = question => {
    if (question.component === 'combined') {
      return (
       <div className="multi-question-container">
         <label className="multi-question-label">{question.text}</label>
         <div className="multi-question-wrapper">
           {question.subQuestions.map((subQuestion, index) => {
             const newName = `${question.name}-${subQuestion.name}`;
             const newSubQuestion = Object.assign({}, subQuestion, { name: newName })
             return (
               <Question
                 question={newSubQuestion}
                 key={index}
                 className={questionClassNames}
                 handleClick={handleClick}
               />
             )
           })}
         </div>
       </div>
      )} else {
       return (
         <Question
           question={question}
           className={questionClassNames}
         />
       )
     }
  }

  return (
    <div className="question-container">
      {renderQuestions(question)}
    </div>
  )
}

QuestionContainer.PropTypes = {
  question: PropTypes.object.isRequired,
  handleClick: PropTypes.func,
}

export default QuestionContainer;

class Quiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      screen: 0
    }
  }

  nextScreen = () => {
    console.log("nextScreen");
    if (this.state.screen < data.questions.length) {
      this.setState({screen: this.state.screen + 1});
    } else {
      this.props.calculateResult(this.props.form.quiz.values);
      this.props.history.push('/congratulations');
    }
  }

  lastScreen = () => {
    if (this.state.screen > 1) {
      this.setState({screen: this.state.screen - 1});
    } else {
      this.props.history.push('/');
    }
  }

  render() {

    const currentQuestion = Object.assign({}, data.questions[this.state.screen]);

    let arrowSource = `/images/arrow-button-${arrowColor}.png`;

    return (
      <div>
        <div className="quiz-wrapper">
          <ArrowButton src={arrowSource} route="back" handleClick={this.lastScreen} />
          <div className="quiz-wrapper-inner">
            <QuestionContainer question={currentQuestion} handleClick={this.nextScreen} />
          </div>
          <ArrowButton src={arrowSource} route="forward" handleClick={this.nextScreen} />
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    form: state.form,
  }
};

const mapDispatchToProps = dispatch => {
  return {
    calculateResult: answers => dispatch(calculateResult(answers)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Quiz);

const renderQuestions = question => {
    if (question.component === 'combined') {
      return (
       <div className="multi-question-container">
         <label className="multi-question-label">{question.text}</label>
         <div className="multi-question-wrapper">
           {question.subQuestions.map((subQuestion, index) => {
             const newName = `${question.name}-${subQuestion.name}`;
             const newSubQuestion = Object.assign({}, subQuestion, { name: newName })
             return (
               <Question
                 question={newSubQuestion}
                 key={index}
                 className={questionClassNames}
                 handleClick={handleClick}
               />
             )
           })}
         </div>
       </div>
      )} else {
       return (
         <Question
           question={question}
           className={questionClassNames}
           handleClick={handleClick}
         />
       )
     }
  }