Redux-форма и дескриптор Submit, onSubmit хаос - PullRequest
Новая
       7

Redux-форма и дескриптор Submit, onSubmit хаос

0 голосов
/ 16 мая 2018

Я пытаюсь обернуть свою голову вокруг формы-редукса, и она onSubmit, handleSubmit.

У меня есть компонент (см. Ниже), который имеет собственное локальное состояние и должен обрабатывать свой собственный способ отправки. 

// NoteForm.js
class NoteForm extends Component {

    state = {
        tags: []
    };

    handleAddItem = (e, {value}) => {
        this.setState({
            tags: [{text: value, value}, ...this.state.tags],
        });
    };

    render() {
        return (
            <Form onSubmit={this.props.handleSubmit}>

                <Field

                    name='description'
                    component={TextAreaField}
                    maxLength='5'
                    label='Description'/>

                <Field
                    name='tags'
                    onAddItem={this.handleAddItem}
                    component={DropdownField}
                    label='Tags'/>

                <Form.Field control={Button} primary className='submit-btn' type='submit'>
                    Login
                </Form.Field>
            </Form>
        );
    }
}

const mapDispatchToProps = () => ({
    handleSubmit: note => console.log(note)//dispatch(addNote(note))
});

export default reduxForm({form: 'noteForm', validate})(connect(null, mapDispatchToProps)(NoteForm));

Но по какой-то причине я продолжаю получать событие прокси вместо значений.

Есть идеи, что мне здесь не хватает?

1 Ответ

0 голосов
/ 16 мая 2018

Вам необходимо изменить порядок ваших HOC, так как в форме избыточности не поступает реквизит от подключенного компонента.Порядок HOC важен, потому что connect снабжает базовый компонент реквизитом, и этот реквизит должен быть получен reduxForm, который он затем может изменить и передать своему базовому компоненту

. Необходимо отметить, что reduxFormHOC ожидает, что реквизит будет onSubmit, который он принимает, и поставляет реквизит handleSubmit в базовый компонент с некоторыми модификациями (такими как предоставление значений данных), и, следовательно, вы должны написать 

const mapDispatchToProps = () => ({
   onSubmit: note => console.log(note)//dispatch(addNote(note))
});

export default connect(null, mapDispatchToProps)(
     reduxForm({form: 'noteForm', validate}
)(NoteForm));
...