Кнопка отправки извне Redux Form v6.0.0

Просто украсьте другой компонент с таким же именем формы, и у вас будет доступ к тем же переменным состояния. Также вы можете передать его функцию onSubmit от родителя и иметь возможность отправлять все значения поля из любого места, где вы их определяете, поскольку все они из состояния избыточности, а не из HTML текущего экземпляра формы. (это немного "хакерский" способ, но он кажется правильным)

Функция отправки определяется из родителя, а не совместно используется в состоянии, поэтому вы можете использовать ее по-разному для каждого экземпляра.

class MySubmitForm extends React.Component {
    render() {
        return (
            <button
                onClick={this.props.handleSubmit}
            >
                {this.props.pristine ? 'pristine' : 'changed'}
            </button>
        )
    }
}

export default reduxForm({
    form: 'myFormName'
})(MySubmitForm);

redux-form работает с React Redux, позволяя html-форме в React использовать Redux для хранения всего своего состояния.

Если «вне Redux-Form» означает все еще приложение redux, вы можете попытаться сохранить эти свойства в состоянии, отправив некоторые действия.

В формах: вы определяете, что происходит (когда оно недействительно и т. д.), отправляете действие для изменения состояния. Во «внешней» части: вы передаете правильное свойство компоненту (с теми, которые вам нужны) и зависит от того, что вы отключить кнопку.

в последней версии редукционной формы 6.0.2:

1. можно получить доступ к состоянию формы pristine, submitting, invalid через селекторы http://redux-form.com/6.0.2/docs/api/Selectors.md/

2. можно экспортировать создателей действий в редукс-форме http://redux-form.com/6.0.2/docs/api/ActionCreators.md/

Может быть, вы можете взглянуть на API экземпляров redux-forms. Он предоставляет доступ к методу submit() для экземпляра компонента оформленной формы. Также доступно pristine логическое свойство и invalid логическое свойство (есть request, чтобы также предоставить свойство отправки).

Здесь есть пример: http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 (пример для 5.3.1, но процесс аналогичен v6 с использованием Instance API)

Основная идея заключается в том, что, добавив ref="myExampleForm" в свою форму, вы можете передавать ее с помощью this.refs.myExampleForm. Затем вы можете проверить свойства экземпляра или вызвать метод submit() (или любой другой доступный метод).

Теперь проще это сделать. Вы можете вызвать действие «Отправить» в автономном компоненте, имеющем кнопку.

См. этот пример: https://redux-form.com/7.1.2/examples/remotesubmit/

Если речь идет о просто отправке формы, то следует указать {withRef: true} option к вашей функции redux connect().

Рассмотрим компонент Row, у которого есть дочерний компонент RowDetail с информацией, которую нужно сохранить из строки.

RowDetail в этом случае может быть создан следующим образом:

import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

const RowDetailForm = reduxForm({form: 'row-detail-form'})(RowDetail);

export default connect(mapStateToProps, null, null, {withRef: true})(RowDetailForm);

Затем в родительском компоненте (Row) вы создаете форму с атрибутом ref:

<RowDetailForm ref={'rowDetailForm'} .../>  

Отправить сейчас «легко»:

onSave() {
  this.refs.rowDetailForm.getWrappedInstance().submit();
}

Если мы говорим о нетронутых и других свойствах формы, то вы можете попытаться получить их из вашей функции mapStateToProps в вашем компоненте parent.

const rowDetailFormName = 'row-detail-form';
const mapStateToProps = (state) => ({
  rowDetailForm: state.form[rowDetailFormName]
});

Но этот способ кажется немного хакерским, потому что, насколько я понимаю API-интерфейс redux-form, все состояния формы никогда не предназначались для прямого доступа. Пожалуйста, поправьте меня, если я ошибаюсь

Недавно мне пришлось заняться этим вопросом. В итоге я передал форму обратного вызова, которая вызывается каждый раз, когда свойства, которые меня интересуют, изменяются. Я использую метод жизненного цикла componentDidUpdate для обнаружения изменений.

Это должно работать на любой версии библиотеки.

Вот сообщение с примером кода - http://nikgrozev.com/2018/06/08/redux-form-with-external-submit-button/