Кнопка отправки со стороны Redux Form v6.0.0

Ответ 1

Просто украсьте другой компонент с тем же именем формы, и у вас есть доступ к тем же переменным состояния там. Кроме того, вы можете передать его в функцииSubmit от родителя и иметь возможность отправлять все значения поля из любого места, где вы их определяете, поскольку все они из состояния redux, а не 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);

Ответ 2

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

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

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

Ответ 3

Возможно, вы можете посмотреть Instance API redux-forms. Он предоставляет доступ к методу submit() для экземпляра вашего компонента оформленной формы. Существует также свойство pristine Boolean и имеющееся invalid Boolean свойство (имеется запрос, чтобы также представить свойство отправки).

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

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

Ответ 4

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

Рассмотрим компонент 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 в своем родительском компоненте.

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

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

Ответ 5

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

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

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

Ответ 6

Теперь это легче сделать. Вы можете вызвать действие "Отправить" в автономном компоненте с кнопкой.

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