Question

我正在尝试使用Redux Form的React-Semantic-UI并取得很多进展但是我收到了以下错误。

警告：validateDOMNesting（...）：不能作为后代出现的。形式（由表格创建）在表单中（在AddStoreInfoForm.js：57）在表单中（在AddStoreInfoForm.js：56）在AddStoreInfoForm中（由Form（AddStoreInfoForm）创建）在Form（AddStoreInfoForm）中（由Connect（Form（AddStoreInfoForm）创建））在Connect（Form（AddStoreInfoForm））（由ReduxForm创建）在ReduxForm中（在AddStoreModal.js：27）在div中（由ModalContent创建）在ModalContent中（在AddStoreModal.js：26）在div（由Modal创建）

以下是代码。我在解决使用Redux-Form和轻松定制自定义组件的最佳方法时遇到了问题。感谢任何建议，谢谢！

import React, { Component } from 'react'
import { Button, Input, Form,  Dropdown, Message, DropDown } from 'semantic-ui-react'
import { Field, reduxForm } from 'redux-form'
//import DatePicker from 'material-ui/DatePicker'

//const dateFormat = require('dateformat')

const options = [
    { key: '1', text: 'New', value: 'New Store' },
    { key: '2', text: 'Minor Remodel', value: 'Minor Remodel'},
    { key: '3', text: 'Major Remodel', value: 'Major Remodel'},
    { key: '4', text: 'Relocation', value: 'Relocation'}
]

class AddStoreInfoForm extends Component {

    renderField = ({input, label, control, options, width, meta: {touched, error} }) => {
        return(
            <div>
                <Form.Field
                    {...input} 
                    control={control}
                    placeholder={label}
                    options={options}
                    width={width}
                    />
                    { touched && error && <span>{error}</span> }
            </div>
        )
    }

    renderDropDown = ({input, width, options, label, meta: {touched, error}}) => {
        return(
            <div>
                <Form.Field>
                    <Dropdown 
                        {...input}
                        onChange={ (param,data) => input.onChange(data.value) }
                        placeholder={label}
                        width={width} 
                        selection 
                        options={options} 
                    />
                </Form.Field>
            </div>
        )
    }

    onSave = (values) => {
        console.log('on save in form', values)
    }

    render() {
        const { handleSubmit } = this.props
        return (
            <form onSubmit={handleSubmit(this.onSave)}>
                <Form>
                    <Form.Group widths='equal'>
                        <Field name='storeName' label='Store Name' control={Input} component={this.renderField} type='text' />
                        <Field name='storeNumber' label='Store Number' control={Input} component={this.renderField} type='text' />
                        <Field name='remodelType' label='Remodel Type' width={6} options={options} component={this.renderDropDown} />
                    </Form.Group>

                <button type='submit'>Save Store</button>
                </Form>
            </form>
        )
    }


}

const addNewStoreForm = reduxForm({
    form: 'addNewStoreForm'
})(AddStoreInfoForm)

export default addNewStoreForm

Redux表单和语义UI

0 个答案: