點擊提交后關閉 Modal

Question

我正在學習 React，現在我有一個模式，當你到達網站時會自動加載。 我可以輸入一個名字，點擊提交，然后這個名字就會出現在登陸/主頁上。 但是，模態不會 go 掉。 我希望它在輸入名稱然后單擊提交后關閉。 我應該如何 go 關於那個？

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

當submit處理程序被觸發時，您應該將showModal state 設置為false 。

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