React Form onSubmit не работает. Метод, переданный через Context API

Метод, переданный через Context Api, отлично работает внутри метода кнопки onClick (внутри той же формы), но не работает внутри метода onSubmit формы.

Gdpr.js

render() {

    return (
        <MyContext.Consumer>
            {(context) => (
                <div>
                    <form onSubmit = {context.onSubmitGdpr}>

                        <FormattedMessage id='app.terms'/>
                        <div>
                            <label className = "container"><strong><FormattedMessage id = {"app.terms.agree"}/></strong>
                                <input type = "checkbox" checked = {this.state.agree} onChange = {this.onChangeHandler}/>
                            </label>
                            <Link to = {context.state.nextStageAfterGDPR ? context.state.nextStageAfterGDPR : "#"}>
                                <button disabled = {!this.state.agree}><FormattedMessage id='app.buttons.submit'/>
                                </button>
                            </Link>
                        </div>
                    </form>
                </div>
            )
            }
        </MyContext.Consumer>
    )
}

export default Gdpr

MyProvider.js

Метод, переданный через провайдера контекстного API,...

onSubmitGdpr = (e) => {                                                        

    e.preventDefault()                                                         
    fetch("/api/v1/gdpr")                                                      
        .then(res=> res.json())                                                
        .then(data => { this.setState({nextStageAfterGDPR: "./camera-intro"})                                                      
        })                                                                     
        .catch(error=>console.info(error))                           
}

MyProvider.js продолжается...

render() {                                                                          
    return (                                    
        <MyContext.Provider value = {{            
            state: this.state,                  
            onSubmitStart: this.onSubmitStart,  
            onSubmitGdpr: this.onSubmitGdpr     
        }}>                                     
            {this.props.children}               
        </MyContext.Provider>                   
    )                                           

}                                                                            

Это означает, что <button> работает не так, как вы ожидаете. Может быть специфичным для <Link> или что-то еще. Рассмотрите возможность предоставления stackoverflow.com/help/mcve для проблемы. Кажется, что контекстный API и onSubmitGdpr не имеют значения, то же самое будет с любой функцией.

Estus Flask 26.02.2019 13:22

Какое пользовательское действие вы выполняете, для которого вы ожидаете выполнения onSubmit?

Ryan Cogswell 28.02.2019 01:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
207
0

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