ReactJS - Почему элемент формы возвращает ноль? - PullRequest
Новая
       5

ReactJS - Почему элемент формы возвращает ноль?

0 голосов
/ 13 января 2020

Я использую ReactJS для создания модальности входа / регистрации, в которой есть вход и форма регистрации, между которыми пользователи могут переключаться. Когда пользователь нажимает на вкладку «Вход», форма «регистрация» перемещается из представления, а форма «вход» перемещается в представление. Тем не менее, я получил сообщение о том, что document.getElementById("signup") вернул null (форма "signin" и "btn" имеют ту же проблему). Также консоль сказала, что «16 stack frames were collapsed» в строке 55. Я прикрепляю скриншоты файла JS, CSS и страницу ошибки localhost. Спасибо за ваше терпение.

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Screenshot 5

1 Ответ

0 голосов
/ 13 января 2020

Если вы делаете правильные вещи в signUp() и signIn(), вы, вероятно, захотите изменить signUp() {} на signUp = () => {}, а также signIn() {} на signIn = () => {}

, затем

<Button onClick={this.signUp} /> вместо <Button onClick={this.signUp()} /> также <Button onClick={this.signIn} /> вместо <Button onClick={this.signIn()} />

Я полагаю, что вы не должны использовать document.getElementById в конструкторе, поскольку то, что вы называете, может еще не существовать в DOM, вы можете прочитать this .

Если вы не собираетесь анимировать свой вид, а просто меняете левую позицию с абсолютной позицией Я предлагаю вам поместить стили, которыми вы хотите манипулировать, в состояние. 

constructor(props) {
  super(props);

  this.state = { 
    signupLeftPosition: 0, // put initial position here, now I assume it is 0
    signinLeftPosition: 0, // put initial position here, now I assume it is 0
    buttonLeftPosition: 0, // put initial position here, now I assume it is 0
  };
}

И ваш signUp () 

signUp = () => {
  this.setState({ 
    signupLeftPosition: 50, 
    signinLeftPosition: 450, 
    buttonLeftPosition: 0
 })
}

И ваши формы, я приму форму с идентификатором "регистрация" в качестве примера: 

<form 
  class="input-group' 
  id="signup" 
  style={{ left: this.state.signupLeftPosition }} 
/>

Также сделайте то же самое с вашим компонентом с идентификатором signin и button

...