React：在函数中调用道具答案

【问题标题】：React: invoke props in a functionReact：在函数中调用道具
【发布时间】：2021-01-09 20:24:19
【问题描述】：

对 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;

【问题讨论】：

标签： reactjs components react-props

【解决方案1】：

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

    this.props.pageSetter('Login');

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

【讨论】：

【解决方案2】：

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

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

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

能否请您编辑它，如果我能提供帮助，我会再次检查！另外，尽管有错字，但我不明白您为什么尝试在 pageSetter 这是一个函数的道具上设置属性“值”。

【讨论】：