Поле в редукционной форме недоступно для редактирования

const FIELDS = [
{label:'Survey Title', name:'title'},
{label:'Survey Line', name:'subject'},
{label:'Email Body', name:'body'},
{label:'Recipients List', name:'emails'}
]

class SurveyForm extends Component{
    renderFileds(){
        return _.map(FIELDS,({label,name})=>{
           return (
            <Field 
                key={name}
                component={SurveyField}
                type="text"
                label={label}
                name={name}
            />
           ) 
        })

    }
    render(){
        return(
            <div>
                <form onSubmit={this.props.handleSubmit((values)=>console.log(values))}>
                    {this.renderFileds()}
                <button type="submit">Submit</button>
                </form>
            </div>
        )
    }
}

Я использую редукционную форму. Импортированное поле из редукционной формы и его рендеринг таким образом. На экране все выглядит нормально, но когда я печатаю в поле ввода, это не появляется. поле недоступно для редактирования. Какая-то конкретная причина, почему это происходит?


reactjs redux redux-form
person Saptarshi Dey    schedule 21.11.2017    source источник
comment
Где вы обернули его с помощью reduxForm HOC и настроили ли вы редюсер   -  person Shubham Khatri    schedule 21.11.2017
comment
Как определяется ваш SurveyField?   -  person Dario    schedule 22.11.2017
comment
Покажите код вашего опроса   -  person Ashh    schedule 22.11.2017
comment
export default ({input,label}) => { return( <div> <label>{label}</label> <input {...input} /> </div> ) } Это мой SurveyFiled   -  person Saptarshi Dey    schedule 22.11.2017

Ответы (1)


arrow_upward
2
arrow_downward

Уже слишком поздно, но я столкнулся с той же проблемой и решил ее, добавив редюсер библиотеки redux-form в редуктор комбината.

import {combineReducers} from 'redux'
import user from './userReducer'
import {reducer as formReducer} from 'redux-form';
const reducer = combineReducers({
     user,
     form: formReducer,
})
export default reducer

Надеюсь, это поможет кому-то.

person Atikur Rahman Sabuj    schedule 23.11.2019
comment
Еще не поздно ;) Ваш ответ мне очень помог. Благодарю вас! - person Mattonit; 19.06.2020