Redux形式和handleSubmit，onSubmit混亂

Question

我試圖把我的頭纏在redux-form上，它是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));

但是由於某種原因，我一直收到代理事件而不是值。

知道我在這里缺少什么嗎？

Answer 1

您需要重新排序HOC，因為redux表單未從連接的組件接收道具。 HOC的順序很重要，因為connect為基礎組件提供了prop，並且該prop應該由reduxForm接收，然后可以對其進行修改並傳遞給其基礎組件

您需要注意， reduxForm HOC希望該prop處於onSubmit ，並通過一些修改（例如提供數據值）將prop handleSubmit給基礎組件，因此您將編寫

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

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