如何将用户名和令牌从孩子发送给父母？

Question

您好，我正在做一个登录应用程序，登录组件是应用程序的子组件，一旦用户登录，我需要将输入的用户名和他返回的令牌发送回应用程序（父级）所以我可以通过道具将它发送到另一个子组件，但我总是将用户名和令牌作为未定义的形式返回。这是应用程序代码（父级）：

import React, { PureComponent } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Home from "./Home";
import Login from "./Login";

interface IProps {}

interface IState {
  username: string;
  status: boolean;
  token: string;
}

class App extends PureComponent<IProps, IState> {
  child: any;
  constructor(props: IProps) {
    super(props);

    this.state = {
      username: "",
      status: true,
      token: ""
    };
  }

  getNameToken = (username: string, token: string) => {
    this.setState({ username: username, token: token });
    console.log(this.state);
  };

  changeStatus = () => this.setState({ status: !this.state.status });

  render() {
    console.log(this.state.status);
    return (
      <div>
        {this.state.status && (
          <Login changeStatus={this.changeStatus} getNameToken={this.getNameToken} />
        )}
        {!this.state.status && (
          <Home username={this.state.username} token={this.state.token} />
        )}
      </div>
    );
  }
}

export default App;

这是子代码：

import React, { PureComponent } from "react";
const API_URL = "http://localhost:5000/auth";

interface IProps {
  getNameToken: any;
  changeStatus: any;
}

interface IState {
  username: string;
  password: string;
  loggedIn: boolean;
  token: string;
  status: boolean;
}

class Login extends PureComponent<IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      username: "",
      password: "",
      token: "",
      loggedIn: false,
      status: false
    };
  }

  submit = async () => {
    const { username, password, loggedIn } = this.state;
    // console.log(this.state);
    const response = await fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        username: username,
        password: password
      })
    });
    const { token } = await response.json();
    sessionStorage.setItem("token", token);
    this.setState({
      loggedIn: true,
      token: token,
      username: username,
      password: password
    });
    this.props.getNameToken();
    this.props.changeStatus();
    console.log("entro")
    // if (token) {
    //   this.props.getName();
    //   this.props.history.push("/home");
    // } else {
    //   console.log("error");
    //   alert("username or password incorrect");
    // }
  };

  render() {
    return (
      <div>
        <div className="mainDiv mt-5">
          <div className="form-group">
            <div className="row">
              <div className="col-4" style={{ marginLeft: "400px" }}>
                <label className="col-form-label">Username</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Enter your Username"
                  value={this.state.username}
                  onChange={({ target: { value } }) =>
                    this.setState({ username: value })
                  }
                />
                <label className="col-form-label">Password</label>
                <input
                  type="password"
                  className="form-control"
                  placeholder="Enter your Password"
                  value={this.state.password}
                  onChange={({ target: { value } }) =>
                    this.setState({ password: value })
                  }
                />
              </div>
            </div>
          </div>
          <button
            type="submit"
            style={{ marginLeft: "550px" }}
            className="btn btn-outline-secondary boton"
            onClick={this.submit}
          >
            Login
          </button>
        </div>
      </div>
    );
  }
}

export default Login;

Answer 1

您可以使用回调来做到这一点。 放入父函数handleUser(username, token) 并像这样在您的孩子身上使用它：

function Parent() {
  const [username, setUsername] = useState('');
  function handleUser(username, token) {
    setUsername(username);
  }
  return (
    <>
      <h1>user data: {username}</h1>
      {
        <Child onChildClick={handleUser} ... />
      )}
    </>
  )
} 

你可以看到更多细节here

在您的示例中，您需要在 Login(child) 组件中使用 getNameToken 并将用户名和令牌传递给它，因此将调用父回调函数