Question

我正在尝试在react-bootstrap模式中使用多页'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>

编辑（comps。导入位）：

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'

当我使用简单表单时，一切都按预期工作。

Answer 1

看起来没有在任何地方定义'redux-form'。您需要安装它，导入它，并用它装饰您的组件。

根据redux-form docs，您应该在HOC样式定义中修饰导出的Modal表单组件。

这将为您的组件提供道具，允许您将输入附加到redux-form。

更新：你的代码有一个错字，可能会引发错误：

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

应该是

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

（缺少>）

将redux-form添加到react-bootstrap模式中

1 个答案: