Question

我正在学习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;

Answer 1

在触发showModal处理程序时，应将false状态设置为submit。

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

单击提交后关闭模态

1 个答案: