Я новичок в реагировании и игре с редукс-формами, пытаясь следовать их руководству по массивам полей (https://redux-form.com/7.2.3/examples/fieldarrays/)
Идея состоит в том, чтобы изначально отображать 1 renderMenuItem
-элемент, если props.MenuItems пуст, в противном случае он должен отображать renderMenuItem
-элемент для каждого элемента в props.MenuItems.
Я сделал компонент menuInputFields
, но он никогда не отображается (не отображается на html-странице, и функция render()
никогда не вызывается), и я не понимаю, почему + элемент Values
отображает странный элемент (см. рисунок) console.log просто показывает, что я действительно могу получить доступ к экспорту по умолчанию menuInputFields
createMenuInputFields (мой компонент редукционной формы)
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { reduxForm, Field, FieldArray } from 'redux-form'
import { menuSelector } from '../reducers/menuViewReducer'
const mapStateToProps = state => {
return {
initialValues: menuSelector.MenuItems(state),
}
}
const mapDispatchToProps = (dispatch) => {
return {
onFormSubmit: dispatch(dispatch, setTodaysMenu)
}
}
class menuInputFields extends React.Component {
constructor(props){
super(props)
}
render() {
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
);
const renderMenuItem = ({fields, meta: {touched, error, submitFailed }}) => (
<ul className='adminInputFoodItem'>
{fields.map((menuItem, index) => (
<li key={index}>
<p className='col-lg-1'>{index+1}</p>
<Field
name={`${menuItem}.FoodItem`}
type='text'
component={renderField}
label='Titel'
className='col-lg-2 createFoodItemTitle'
/>
<Field
name={`${menuItem}.Description`}
type='text'
component={renderField}
label='Beskrivelse'
className='col-lg-6 createFoodItemDescription'
/>
<Field
name={`${menuItem}.Price`}
type='text'
component={renderField}
label='Pris'
className='col-lg-1'
/>
<button
type='button'
title='Fjern'
onClick={() => fields.remove(index)}
className='btn btn-default btn-xs'
/>
</li>
))}
<li>
<button
type='button'
onClick={() => fields.push({})}
className='btn btn-default btn-xs'
>Tilføj
</button>
</li>
</ul>
);
const { handleSubmit, pristine, reset, submitting } = this.props
return (
<form onSubmit={handleSubmit}>
<FieldArray name='menuItemList' component={renderMenuItem} />
<div className=''>
<button
className='btn btn-default'
type='submit'
disabled={submitting || pristine}
>Gem Menu
</button>
</div>
</form>
)
}
}
menuInputFields = reduxForm({
form: 'inputItemList',
})(menuInputFields)
export default connect(mapStateToProps, mapDispatchToProps)(menuInputFields)
Здесь компонент импортируется и добавляется в функцию рендеринга
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { reduxForm, Field, FieldArray } from 'redux-form'
import { Values } from "redux-form-website-template";
import { postMenuRequest } from '../sagas/adminMenuSaga'
import { menuViewDataRequest } from '../sagas/menuViewSaga'
import { menuSelector } from '../reducers/menuViewReducer'
import menuInputFields from './createMenuInputFields'
const mapStateToProps = (state) => {
return {
MenuItems: menuSelector.MenuItems(state),
Id: menuSelector.Id(state),
Date: menuSelector.Date(state)
}
}
const mapDispatchToProps = (dispatch) => {
return {
postMenuData: (menu) => dispatch(postMenuData(menu)),
menuDataRequest: () => dispatch(menuViewDataRequest())
}
}
class adminSetMenuView extends React.Component {
constructor(props){
super(props)
}
componentWillMount(){
this.props.menuDataRequest()
}
render(){
console.log(menuInputFields)
return(
<div>
<menuInputFields />
<Values form='inputItemList' />
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(adminSetMenuView)
объединение редукторов
import { combineReducers } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'
import menuViewList from '../reducers/menuViewReducer'
export default combineReducers({
menuViewList,
form: reduxFormReducer,
})