TypeError: Невозможно прочитать свойство handleSubmit из неопределенного - PullRequest
Новая
       7

TypeError: Невозможно прочитать свойство handleSubmit из неопределенного

0 голосов
/ 04 декабря 2018

Я использую материал пользовательского интерфейса для разработки каркаса пользовательского интерфейса 

     function handleSubmit(){
                alert("success");
            }
            function SignIn(props) {
            const { classes } = props;
            handleSubmit();
            return (<form className={classes.form} onSubmit={this.handleSubmit()}>
                  <FormControl margin="normal" required fullWidth>
                  <InputLabel htmlFor="email">Email Address</InputLabel>
                  <Input id="email" name="email" autoComplete="email" autoFocus />
                  </FormControl>
</form>

стек ошибок 

                    60 | <Typography component="h1" variant="h5">
                61 |   Sign in
                62 | </Typography>
                > 63 | <form className={classes.form} onSubmit={this.handleSubmit()}>
                    | ^  64 |   <FormControl margin="normal" required fullWidth>
                65 |     <InputLabel htmlFor="email">Email Address</InputLabel>
                66 |     <Input id="email" name="email" autoComplete="email" autoFocus />

Может кто-нибудь знает, где происходит ошибка?`

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

У вас есть несколько проблем здесь:

  1. Вы звоните handleSubmit() внутри функционального компонента.Это должно вызываться только вашей формой
  2. Функция обработчика не должна вызываться в onSubmit.Используйте onSubmit={this.handleSubmit} вместо onSubmit={this.handleSubmit()}.
  3. При использовании функциональных компонентов (вместо класса) нет объекта this, поэтому this.props тоже нет.

  4. Если вы используете функции обработки, то вам следует использовать класс.См. Пример ниже. 

    class SignIn extends Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = function(){
     alert("success");
  }

  render() {
    const { classes } = this.props;

    return (<form className={classes.form} onSubmit={this.handleSubmit}>
      <FormControl margin="normal" required fullWidth>
        <InputLabel htmlFor="email">Email Address</InputLabel>
        <Input id="email" name="email" autoComplete="email" autoFocus />
      </FormControl>
     </form>);
  }
}
0 голосов
/ 04 декабря 2018

Вы можете попробовать с - 

onSubmit={()=> this.handleSubmit()}

Я думаю, что проблема определенно будет Лексическая область видимости в Javascript

...