在三元运算符内反应多个条件?

时间:2018-05-30 21:54:23

标签: reactjs

我正在建立一个开放的论坛,但我得到的一切都按照我想要的方式工作,但是我最近在我的代码中遇到了一个小错误。虽然很多论坛都需要登录才能查看被询问的主题,但我的内容是在用户不必注册或登录的情况下构建的(我是这样构建的,以防用户只是想查看主题而无需注册或登录)。对于其中一个功能,我可以将用户可以删除特定问题帖子的回复。

因此,我得到了它只能识别用户ID的地方,并且它会删除基于此的回复。但是,如果用户未登录,他们仍然可以删除回复(这是错误的位置)

所以我的问题是我可以检查三元运算符中的2个条件吗?

我想检查第一个用户是否登录,如果是,检查userId是否与reply_user_id匹配,如果两个案例都通过,他们将能够删除那里的回复。但是,如果一个人失败,请不要显示垃圾桶图标。现在,垃圾邮件图标在登录时工作正常,但如果用户未登录则显示垃圾桶图标。

我有很多代码,所以我只会显示与我的问题相关的部分:



import React from 'react';

import Header from '../common/Header';

import { Link } from 'react-router-dom';
import { Modal, Button } from 'react-bootstrap';
import Pagination from "react-js-pagination";

import ForumpageService from '../../services/forumService';
import appController from '../../controllers/appController';

import { confirmAlert } from 'react-confirm-alert';

class Forumreplies extends React.Component {
    constructor(props){
        super(props);

        this.deleteReply = this.deleteReply.bind(this);
        this.pagination = this.pagination.bind(this);

        this.state = {
            topicId: 0,
            replyId: 0,
            userId: this.props.match.params.userid,
            postDetails: {},
            repliesData: [],
            reply: '',
            errorMsg: '',
            isLoggedin: false,
            canDelete: false,
        }
    }

    async componentDidMount(){
        // Check if user is logged in
        if(localStorage.getItem('userData') !== null) {
            this.setState({isLoggedin: true})
        }

        const topicId = this.props.match.params.topicid

        const postDetails = await ForumpageService.replyDetails({topicId: topicId})

        this.setState({
            postDetails: postDetails[0],
            topicId: topicId
        })

        await this.postReplies();

        console.log(this.state);

    }

    
    }

    deleteReply(id, e){
        confirmAlert({
            customUI: ({ onClose }) => {
              return (
                <div className='custom-ui'>
                  <h1>Are you sure</h1>
                  <p>You want to delete this reply?</p>
                  <button className="btn btn-primary" onClick={onClose}>Cancel</button>
                  <button className="btn btn-primary" onClick={() => {this.confirmDelete(id); onClose();}}>Confirm</button>
                </div>
              )
            }
        })
    }
    
    render(){
        const repliesData = currentReply.map((row, index) => {
            return (
                <div className="reply-container" key={index}>
                    {row.reply_status == 0 ?
                        <div className="row" id="reply-messages-deleted">
                            <div className="col-md-8">
                                <p>{row.userName}</p>
                                <p>{row.reply_message}</p>
                                <p>This reply has been deleted</p>
                            </div>
                            <div className="col-md-2">
                            // Multiple condition I want to check, right now it's only checking 1 condition which is the userid to the reply id but I want to also check if the user is offline as well.
                                {this.state.userId == row.reply_user_id ? <i className="far fa-trash-alt" onClick={this.deleteReply.bind(this, row.reply_id)} title="Delete this reply?"></i> : null }
                            </div>
                        </div>
                        :
                        <div className="row" id="reply-messages" key={index}>
                            <div className="col-md-8">
                                <p>{row.userName}</p>
                                <p>{row.reply_message}</p>
                            </div>
                            <div className="col-md-2">
                                {this.state.userId == row.reply_user_id ? <i className="far fa-trash-alt" onClick={this.deleteReply.bind(this, row.reply_id)} title="Delete this reply?"></i> : null }
                            </div>
                        </div>
                    }
                </div>
            )
        })

export default Forumreplies;
&#13;
&#13;
&#13;

0 个答案:

没有答案