如何在 React App 的弹出窗口中动态更改消息答案

【问题标题】：how to dynamically change the message in popup in React App如何在 React App 的弹出窗口中动态更改消息
【发布时间】：2021-02-16 10:36:08
【问题描述】：

我似乎不知道如何在消息更改时刷新弹出子组件。这是我的父元素代码的一部分：

dataFetching = (props) => {         
            fetch('https://desolate-harbor-55159.herokuapp.com/signin', {
            method: 'post',
            headers: {'Content-type': 'application/json'},
            body: JSON.stringify({
                email: this.state.signInEmail,
                password: this.state.signInPassword
            })
        }).then(response => response.json())
                .then(user => {
                    if (user.email === this.state.signInEmail) {
                        this.props.loadUser(user)
                        this.props.onRouteChange('home') 
                    } else {
                        return (                                                                
                            this.changemessage('wrong credentials')                     
                        )
                    }                       
                })      
}

changemessage = (message) => {
    this.setState({popupmessage: message})
}

render() {
        return (
            <div>
                {this.state.popupstate
                    ? <Popup popupmessage={this.state.popupmessage} togglePopup={this.togglePopup}/>

这是Popup子元素代码：

class Popup extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            togglepopup: this.props.tooglePopup,
            popupmessage: this.props.popupmessage
        }
    }

    tooglePopup = (value) => {
        this.props.togglePopup(false)
    }

    render () {
        return (
            <div className='popup-box center w-20 br3 mt5 b--green b--solid' onClick={this.tooglePopup} >
                { <div className='tc'>
                        <h1>
                            {this.state.popupmessage}
                        </h1>
                        <p>click me</p>
                    </div>
                }
            </div>
        )
    }
}

我是新手，我已经在这里迷路了....

【问题讨论】：

标签： javascript reactjs state

【解决方案1】：

这应该适合你

class Popup extends React.Component {

render () {
    return (
        <div className='popup-box center w-20 br3 mt5 b--green b--solid' onClick={() => this.props.tooglePopup()} >
            { <div className='tc'>
                    <h1>
                        {this.props.popupmessage}
                    </h1>
                    <p>click me</p>
                </div>
            }
        </div>
    )
}

}

【讨论】：

这并没有在获取数据验证后将我的弹出窗口中的文本更改为“错误凭据”。它仍然停留在“正在加载...”我只在控制台中看到 400 错误请求，但我的弹出窗口没有更新
我在这里需要的是在dataFetching函数的返回中声明this.setState({popupmessage: message})后动态更新弹出窗口中的文本

【解决方案2】：

我明白了。我改变了一些东西。我换了

tooglePopup = (value) => {
        this.props.togglePopup(false)
    }

与

handleClick = () => {
       this.props.toggle();
    };

并将其添加到我的 Popup 元素中

render () {
        return (
            <div className='popup-box center w-20 br3 mt5 b--green b--solid' onClick={this.handleClick} >
                { <div className='tc'>
                        <h2>
                            {this.props.message}
                        </h2>
                        <p>click me</p>
                    </div>
                }
            </div>
        )
    }

在父元素中，我必须更改它显示弹出窗口的方式，我已将其添加到渲染的开头，并像这样传递消息：

render() {
        return (
            <div>
                <div className='center mt4'>        
                     {this.state.popupstate ? <Popup className='center w-100 flex' toggle={this.togglePop} message={this.state.popupmessage}/> : null}      
                </div>

【讨论】：