如何導出 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 的變量，變量名稱不同嗎？