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

Этот вопрос относится к Redux Form v6.0.0 (во время написания этого вопроса это v6.0.0-alpha.15).

Как я могу получить статус проверки формы (например, pristine, submitting, invalid) извне компонента формы?

Позвольте мне привести пример. Это псевдоструктура "классической редукционной формы":

<Form(MyExampleForm)>
    <MyExampleForm>
        <input name="title" ... />
        <submit-button />

... где <submit-button> в JSX выглядит так:

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>

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

  • Как я могу получить те pristine, submitting, invalid из-за Redux-Form? (Без действительно неприятного взлома, если это возможно: -))
  • Как я могу отправить эту форму?

Ответы

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

Ответ 6

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

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