如何导出 useState 钩子的值

Question

我正在尝试在我的组件中使用“useState”挂钩来设置用户名和密码输入字段的值，然后将有效负载（用户名和密码的值）发送到与 redux 一起使用的减速器。

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import {signUpUser} from "../SideBar/Redux"
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import "./SignUp.css";

const SignUpModal = (props) => {
  const closeOnEscapeKeyDown = e => {
    if ((e.charCode || e.keyCode) === 27) {
      props.modalClosed();
    }
  };

  useEffect(() => {
    document.body.addEventListener("keydown", closeOnEscapeKeyDown);
    return function cleanup() {
      document.body.removeEventListener("keydown", closeOnEscapeKeyDown);
    };
  }, []);

  const [userNameInput, setUserNameInput] = useState("");
  const [userPasswordInput, setUserPasswordInput] = useState("")

  const userNameHandler = (e) => {
    setUserNameInput(e.target.value)
  }
 
  const userPasswordHandler = (e) => {
    setUserPasswordInput(e.target.value)
  }

  return ReactDOM.createPortal(
    <CSSTransition
      in={props.isSignupModalOpened}
      unmountOnExit
      timeout={{ enter: 0, exit: 300 }}
    >
      <div className="modal" onClick={props.modalClosed}>
        <div className="modal-content" onClick={e => e.stopPropagation()}>
          <div className="modal-header">
            <h4 className="modal-title">Sign Up</h4>
          </div>
          <div className="modal-body">
              <div className = "modal-input-field">
                <div className = "modal-username-field">
                    <p className = "p-username">Username</p>
                    <input tag = "username"
                           placeholder = "eg: muhammet-aldulaimi"
                           onChange = {userNameHandler}
                      /> 
                </div>
                <div className = "modal-password-field">
                    <p className = "p-password">Password</p>
                    <input tag = "password"
                           type = "password"
                           placeholder = "eg: someStrongPassword123"
                           onChange = {userPasswordHandler}
                    /> 
                </div>
              </div>
              <div className = "modal-submit"> 
                <button onClick = {props.userInfoSubmitHandler}
                        className = "modal-submit-button">Submit
                </button>
              </div>

          </div>
          <div className="modal-footer">
            <button className="button" onClick={props.modalClosed} >
              Close
            </button>
          </div>
        </div>
      </div>
    </CSSTransition>,
    document.getElementById("root")
  );
};




const mapStateToProps = (state) => {
    return {
        isModalOpen: state.isModalOpen,
        isSignupModalOpened: state.isSignupModalOpened
    }
}



const mapDispatchToProps = (dispatch) => {
    return {
        modalOpened : () => {
            dispatch({type: "OPEN_MODAL"})
        },
        modalClosed : () => {
            dispatch({type: "CLOSE_MODAL"})
        },
        userInfoSubmitHandler: () => {
            console.log("reached prop successfully")
            console.log(userNameValue, userPasswordValue)
            dispatch(signUpUser({userName: userNameValue, userPassword: userPasswordValue}))
        }
    }
}   

export default connect(mapStateToProps, mapDispatchToProps)(SignUpModal);

我尝试导出变量，不起作用。 将变量分配给另一个变量然后导出它是行不通的。 我还尝试将 state 变量作为 arguments 传递给我的 prop.userInfoSubmitHandler。 那也没用。 我不明白为什么这些变量在我的 userInfoSubmitHandler function 的 scope 中不可用。 有小费吗？

Answer 1

您可以尝试将 onclick 作为参数传递：

<button onClick={() => props.userInfoSubmitHandler(userNameInput, userPasswordInput)}
    className = "modal-submit-button">Submit
</button>

我还看到您在 state 中没有任何名为 userNameValue 和 userPassworValue 的变量，变量名称不同吗？