Примечание. Этот вопрос не спрашивает, как связать обработчики событий. Он спрашивает, почему без привязки this
не соответствует onClick
Button
(оно относится к объекту) и onSubmit
Form
(это undefined
).
Полный вопрос:
Я пытался проверить, что происходит с объектом this
внутри метода, если я не привязываю метод внутри конструктора. Я обнаружил, что результат для формы и кнопки отличается. Ниже приведен мой код для лучшего понимания:
const {Button, Form, Input} = Reactstrap;
class Test extends React.Component{
constructor(props){
super(props);
}
handleClick(){
console.log(this); //This gives complete information about the Button object and its properties
}
handleSubmit(e){
console.log(this); //This one is undefined
e.preventDefault();
}
render(){
return(
<React.Fragment>
<Form onSubmit={this.handleSubmit} >
<Input type="submit" name="submit">Submit</Input>
</Form>
<Button name="butt1" onClick={this.handleClick}>Click</Button>
</React.Fragment>
);
}
}
ReactDOM.render(<Test />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>
Я проверил, что мой вопрос отличается от этого один, потому что в предоставленном вопросе спрашивающий хочет связать this
для компонента, в то время как в моем вопросе я хочу, чтобы this
ссылался на форму, точно так же, как он ссылается на кнопку.
Я пытаюсь найти причину такого другого поведения, но мне это не удалось. Не могли бы вы, люди, указать причину того же и предложить способ, чтобы this
внутри handleSubmit
начинало ссылаться на объект формы?
ИЗМЕНИТЬ Это то, что я считаю причиной, пожалуйста, подтвердите, правильно ли это
Поскольку обработчик отправки был определен с формой, а не с кнопкой отправки, вот почему this
не определено, потому что была нажата кнопка отправки, а не форма. Я думаю, мне нужно что-то вроде пузырькового захвата.
this
. Итак, я получил приведенный выше результат, и мой вопрос заключается в том, почемуthis
не определено после отправки формы, а после нажатия кнопки не определено. Ищу причину такого поведения. - person Vipul Tyagi   schedule 13.06.2020