点击提交后关闭 Modal

Question

I am learning React and right now I have a modal that loads automatically when you get to the site. I am able to input a name, click submit and then the name appears on the landing/homepage. However, the modal does not go away. I would like for it to close out after inputting a name and then clicking submit. How should I go about that?

import React from 'react';
import {Link} from "react-router-dom";
import Modal from './Modal';


class HomePage extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            showModal: true,
            firstName: '',
            submittedName: ''
        };

    }
    inputChange = e => {
        const firstName = e.target.value;
        this.setState(() => ({ firstName }));

    };
    displayNameHandler = () => {
        this.setState(prevState => ({ submitedFirstName: prevState.firstName }));
      };


    render(){
        const { showModal } = this.state;
        return (
            <div>
                {
                    showModal ? (
                        <div className="my-modal">
                           <h1>Welcome to my app!</h1>
                           <p>Please enter your name</p>
                           <form>  
                               <label>
                                   Name:
                                   <input type="text" name="firstName" onChange={this.inputChange} ></input>
                               </label>
                               <button type="button" onClick={this.displayNameHandler}>
                                    Submit
                                </button>
                           </form>

                        </div>
                     ) : null
                }
                 <h1>Welcome, {this.state.submitedFirstName && this.state.submitedFirstName}</h1>
                <p>Please select a category </p>
                <Link to="/ProgrammingJokes">
                <button>Programming Jokes</button>
                </Link>
                <Link to="/DadJokes">
                 <button>Dad Jokes</button>
                 </Link>
                 <Link to="/SportsJokes">
                <button>Sports Jokes</button>
                </Link>
            </div>
        )
    }
}

export default HomePage;

Answer 1

You should set your showModal state to false when the submit handler is fired.

displayNameHandler = () => {
        this.setState(prevState => ({ submitedFirstName: prevState.firstName, showModal:false}));
      };