Как выполнить функцию, которая вызывается в дочернем компоненте как свойство в реагировать?

Question

В своем файле app.js я включил компонент подписи, что-то вроде этого:

onSignin = () => {
  this.setState({ route: "home" });
};

regFunction = () => {
  this.setState({ route: "registering" });
};

render() {
  return (
    <div>
      <Signin y={this.onSignin} reg={this.regFunction} />
    </div>
  );
}

и в файле компонента Signin.js я написал следующее:

import React from "react";

class Signin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      signInEmail: "",
      signInPassword: ""
    };
  }

  onEmailChange = event => {
    this.setState({ signInEmail: event.target.value });
  };
  onPasswordChange = event => {
    this.setState({ signInPassword: event.target.value });
  };
  onSubmitSignIn = () => {
    console.log(this.state);
    this.y;
  };

  render() {
    return (
      <article className="br4 ba  b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
        <main className="pa4 white-80">
          <form className="measure ">
            <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
              <legend className="f4 fw6 ph0 mh0">Sign In</legend>

              <div className="mt3">
                <label className="db fw6 lh-copy f6">Email</label>
                <input
                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                  type="email"
                  name="email-address"
                  id="email-address"
                  onChange={this.onEmailChange}
                />
              </div>
              <div className="mv3">
                <label className="db fw6 lh-copy f6" for="password">
                  Password
                </label>
                <input
                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                  type="password"
                  name="password"
                  id="password"
                  onChange={this.onPasswordChange}
                />
              </div>
            </fieldset>
            <div className="">
              <input
                className="b ph3 pv2 input-reset ba white-80 b--black bg-transparent grow pointer f6 dib"
                type="submit"
                value="Sign in"
                id="clicking"
                onClick={this.onSubmitSignIn}
                // onClick={this.props.y}
              />
            </div>
            <div className="lh-copy mt3">
              <a
                onClick={this.props.reg}
                type="submit"
                className="b ph3 pv2 input-reset ba white-80 b--black bg-transparent grow pointer f6 dib"
                value="Register"
              >
                Register
              </a>
            </div>
          </form>
        </main>
      </article>
    );
  }
}

export default Signin;

Что я действительно ожидаю увидеть, так это то, что всякий раз, когда я вводю электронную почту и пароль на странице входа в систему (передняя часть), а затем нажимаю кнопку отправки, я должен видеть электронную почту и пароль на консоли и входить в систему. главная страница. Технически, вызывая событие onClick для кнопки отправки, должны выполняться оба свойства onSubmitSignIn и y (Signin).

но я не вижу ни пароля, ни адреса электронной почты на консоли, ни могу войти в систему и сделать шаг вперед. Как сделать так, чтобы onSubmitSignIn и Y выполнялись одним простым щелчком одновременно?

Answer 1

Я полагаю, вы получаете undefined при выполнении

console.log(this.state);

внутри onSubmitSignIn, это потому, что у вас нет bind до this.

Итак, к вашему конструктору добавьте следующее:

  constructor(props) {
    super(props);
    this.state = {
      signInEmail: "",
      signInPassword: ""
    };
    this.onSubmitSignIn = this.onSubmitSignIn.bind(this);
  }

также учитывайте, что ваша кнопка является отправителем формы, поэтому она отправит событие для отправки формы и затем обновит страницу. так что вы также должны добавить следующее на onSubmitSignIn

  onSubmitSignIn = (e) => {
    e.preventDefault();  // this will stop the propagation of the event.
    console.log(this.state); // this will log your state.
    this.props.y(); // this will call your y function from the parent.
  }; 

Answer 2

Я добавил эти строки, и он выполнил обе функции:

onSubmitSignIn = (event) => {
  event.preventDefault();
  console.log(this.state);
  this.props.y()
}

Разве я не написал event.preventDefault (); Я бы не смог увидеть логи. и если бы я не поставил скобки после y (являющегося свойством компонента Signin), я бы не смог вызвать его из родительского файла.

Большое спасибо, ребята.

Answer 3

Ваш браузер обновляется при отправке формы, так как это поведение по умолчанию.

Используйте preventDefault в событии отправки, чтобы предотвратить это.

onSubmitSignIn = (event) => {
  event.preventDefault();
  console.log(this.state);
  this.props.y();
};