React：在函数中调用 props

Question

React 相当新，所以请让我知道我是否在接近这个错误。

简而言之，我希望能够在 signUp 组件中提交表单后重定向到登录组件。

当我们单击注册或登录按钮时，它会将 currentPage 状态更改为指定的值。 例如，如果 currentPage 当前设置为“Login”，它将加载 Login 组件并使用 Sign Up 组件加载“Sign Up”。 组件按其应有的方式加载，但是当尝试在 SignUp 组件中传递道具时，我不知道如何在提交表单后调用 pageSetter 函数。

我可以做下面的工作，但我只想在 onSubmit 函数中调用它

<form onSubmit={this.props.pageSetter}>

import React from "react";

function Button(props) {
  return (
    <button id={props.id} value={props.value} onClick={props.onClick}>
      {props.value}
    </button>
  );
}

export default Button;

import SignUp from "./components/signUp.jsx";
import Login from "./components/login.jsx";

class App extends Component {
  state = {
    currentPage: "Login",
  };

  pageSetter = ({ target }) => {
    this.setState({ currentPage: target.value });
  };

  render() {
    return (
      <div>
        {this.state.currentPage !== "Sign Up" && (
          <Button id={"signUp"} value={"Sign Up"} onClick={this.pageSetter} />
        )}

        {this.state.currentPage !== "Login" && (
          <Button id={"login"} value={"Login"} onClick={this.pageSetter} />
        )}

        {this.state.currentPage === "Login" && <Login />}
        {this.state.currentPage === "Sign Up" && (
          <SignUp pageSetter={this.pageSetter} />
        )}
      </div>
    );
  }
}

export default App;

class SignUp extends Component {

  myChangeHandler = (event) => {
    let attribute = event.target.id;
    let value = event.target.value;
    this.setState({ [attribute]: value });
  };

  onSubmit = (event) => {
    event.preventDefault();

    this.props.pageSetter.value = "Login"
    this.props.pageSetter
  };

  render() {
    console.log(this.state);
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <p>real_name:</p>
          <input id="real_name" type="text" onChange={this.myChangeHandler} />

          <p>username:</p>
          <input id="username" type="text" onChange={this.myChangeHandler} />

          <p>email:</p>
          <input id="email" type="text" onChange={this.myChangeHandler} />

          <p>password:</p>
          <input
            id="password"
            type="password"
            onChange={this.myChangeHandler}
          />

          <p>picture</p>
          <input id="picture" type="text" onChange={this.myChangeHandler} />

          <button id="userSubmit" type="submit">
            Submit
          </button>
        </form>
      </div>
    );
  }
}

export default SignUp;

Answer 1

我认为您的代码示例中有一个错字：

  onSubmit = (event) => {
    event.preventDefault();

    this.props.pageSetter.value = "Login"
    this.props.pageSetter
  };

能否请您编辑一下，我会再次检查是否可以提供帮助！ 另外，尽管有拼写错误，但我不明白您为什么尝试在 props pageSetter上设置属性“value”，它是一个函数。

Answer 2

我不明白您为什么要在函数中设置属性。 您应该使用该值作为参数来调用该函数，而不是这样做。

    this.props.pageSetter('Login');

您还应该修复pageSetter函数以接收页面值而不是事件。