Есть ли способ получить, если реагирующая окончательная форма коснулась статуса вне формы?

Я использую окончательную форму реагирования в другом компоненте, скажем, диалоговое окно div, и я хочу проверить, была ли эта форма изменена перед закрытием этого диалогового окна div (чтобы показать сообщение типа "У вас есть несохраненные изменения").

Вот пример, я понятия не имею, как вызвать onChange в форме при изменениях окончательной формы - в теге он не будет работать, если я использую какой-либо пользовательский ввод, а в методе validate это выглядит слишком грязно.

class Dialog extends Component {
    ...
    onFormChange = () => this.setState({isFormChanged: true})
    close() {
        if (this.isFormChanged){
            this.showDialog()
        } else {
            //close dialog
        }
    }
    render(){
        return <div>
            <MyForm onChange={this.onFormChange} />
        </div>
    }
}

и форма

function MyForm({ saveData, onChange, ...props }) {
    return <div>
        <Form
            onSubmit={saveData}}
            render={({
                handleSubmit,
            }) => (
                <form onSubmit={handleSubmit} onChange={() => onChange()}>
                    </form>

1 ответ

Попробуйте заглянуть в <FormSpy> вспомогательный компонент, и это onChange prop: https://github.com/final-form/react-final-form

Другие вопросы по тегам