0

반응 부트 스트랩 모달 안에 다중 양식 'redux-form'양식을 만들려고합니다. 따라서 모달을 열기 위해 클릭하면 양식이 모달에 표시됩니다 중단.반응 부트 스트랩 모달에 redux-form 추가

어떻게 하시겠습니까?

class Home extends Component{ 
    constructor(props) { 
    super(props) 
    this.close = this.close.bind(this) 
    this.open = this.open.bind(this) 
    this.state = { 
     showModal: false 
    } 
    } 

    close() { 
    this.setState({ showModal: false }) 
    } 

    open() { 
    this.setState({ showModal: true }) 
    } 

    render(){ 
     let WizardForm = <WizardForm/> 
     return(
      <Grid> 
       <Row className="above"> 
        <Col xs={10} md={8}><code> 
         <Button bsStyle="primary" bsSize="large" onClick={this.open}Open Form</Button> 
        </code></Col> 
       </Row> 

       <Row className="below"> 
        <Col xs={12} md={10}><code> 
         <SlideShow/> 
        </code></Col> 
       </Row> 
       <Modal show={this.state.showModal} onHide={this.close}> 

        <div>{WizardForm}></div> 
        <Modal.Footer> 
         <Button onClick={this.close}>Close</Button> 
        </Modal.Footer> 
       </Modal> 
      </Grid> 

편집 (. 콤프 수입 비트) :

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { Link } from 'react-router' 
import SlideShow from 'containers/SlideShow' 
import WizardForm from 'containers/WizardForm' 
import SimpleForm from 'containers/SimpleForm' 

내가 예상대로 간단한 양식의 모든 작품 사용

다음 코드는 포착되지 않은 변형 오류를 얻을 수 있습니다.

+0

은 무엇입니까 : 코드는 아마 오류를 던지고 오타가 있습니다 불변의 오류? – JizoSaves

+0

잡히지 않은 불변의 위반 : 요소 유형이 유효하지 않습니다. 문자열 (내장 구성 요소의 경우) 또는 클래스/함수 (복합 구성 요소의 경우)가 있어야하지만 미정도입니다. 'Home'의 render 메소드를 확인하십시오. –

+1

WizardForm 및 모달을 가져올 부분을 표시해 주시겠습니까? 문제가 있다고 생각합니다. – JizoSaves

답변

0

외관상 어디에도 정의 된 'redux-form'이 없습니다. 설치하고, 가져오고, 구성 요소로 장식해야합니다.

redux-form docs 단위로 내 보낸 모달 양식 구성 요소를 HOC 스타일 정의로 장식해야합니다.

This will provide your component with props allowing you to attach your inputs to redux-form.

는 UPDATE :

<Button bsStyle="primary" bsSize="large" onClick={this.open}Open Form</Button>

<Button bsStyle="primary" bsSize="large" onClick={this.open}>Open Form</Button>

(> 누락)이어야한다

관련 문제