点击提交后关闭 Modal答案

【问题标题】：Closing Modal after clicking submit点击提交后关闭 Modal
【发布时间】：2020-04-23 02:21:15
【问题描述】：

我正在学习 React，现在我有一个模式，当你到达网站时会自动加载。我可以输入一个名字，点击提交，然后这个名字就会出现在登陆/主页上。但是，模态不会消失。我希望它在输入名称然后单击提交后关闭。我该怎么办？

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;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当submit 处理程序被触发时，您应该将showModal 状态设置为false。

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

【讨论】：