reactjs - 通过三元运算符映射更改特定图标？

Question

我通过我的地图构建了一个地图render，一切都按预期工作，但是我在代码中发现了一个小错误，当我点击编辑按钮时，它会通过地图更改所有编辑按钮。如何仅更改该特定地图图标的编辑图标，而不是通过我的渲染影响所有其他图标map？

这是我的代码：

import React from 'react';

import Headericons from '../common/header-icons';
import Header from '../common/header';
import { Link } from 'react-router-dom';
import Moment from 'moment';
import { confirmAlert } from 'react-confirm-alert';
import Pagination from 'react-js-pagination';
import CKEditor from "react-ckeditor-component";

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

import Footer from '../common/footer';

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

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

        this.createEditor = this.createEditor.bind(this);
        this.destroyEditor = this.destroyEditor.bind(this);

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

            // CKeditor edit state
            showEditor: false,
        }
    }

    onChange(e) {
        //console.log("onChange fired with event info: ", e);
        var newContent = e.editor.getData();
        this.setState({
            reply: newContent
        })
        //console.log(this.state);
    }

    async onSubmit(e) {
        e.preventDefault();
        if (this.state.reply === '') {
            this.setState({ errorMsg: true })
        } else {
            // Insert reply
            const data = {
                userId: this.state.isloggedinuserId,
                reply: this.state.reply,
                topicId: this.state.topicId
            }
            const userReply = await ForumpageService.addReply(data)
            location.href = '/replies/' + this.props.match.params.topicid + '/user/' + this.props.match.params.userid + '/' + this.props.match.params.topic_name;
            //console.log(userReply);
        }
    }

    createEditor(replyeID){
        this.setState({showEditor: true})
        //console.log(e);
        if(!this.state.showEditor){
            // Create editor instance
            CKEDITOR.inline(replyeID);
        }
    }
    
    destroyEditor(destroyreplyeID){
        this.setState({showEditor: false})

        //console.log(destroyreplyeID);

        if (this.state.showEditor) {
            // Save & Destroy editor instance
            console.log(CKEDITOR.instances[destroyreplyeID].getData());
            CKEDITOR.instances[destroyreplyeID].destroy();
        }
    }

    

    render() {
        
            const repliesData = currentTopics.map((row, index) =>
                <div className="reply-container" key={index}>
                    {
                        row.reply_status == 0 ?
                        <div className="row" id="reply-messages-deleted">
                            <div className="col-md-2" id="profile-info">
                                {<span>{row.userName}</span>}
                            </div>
                            <div className="col-md-8">
                                <p dangerouslySetInnerHTML={{__html: row.reply_message}} />
                                <h3>This reply has been deleted.</h3>
                            </div>
                            <div className="col-md-2">
                                <p>{'Replied: ' + Moment.utc(row.created_date).format('YYYY-MM-DD hh:mm A')}</p>
                            </div>
                        </div>
                        :
                        <div className="row" id="reply-messages" key={index}>
                            <div className="col-md-2" id="profile-info">
                                {<span>{row.userName}</span>}
                            </div>
                                <div className="col-md-8" 
                                    suppressContentEditableWarning
                                    contentEditable="true"
                                    >
                                    <p id={"editor_" + row.reply_id} dangerouslySetInnerHTML={{__html: row.reply_message }} />
                                </div>
                            <div className="col-md-2">
                                <p>{'Replied: ' + Moment.utc(row.created_date).format('YYYY-MM-DD hh:mm A')}</p>



                                {
                                    this.state.showEditor == false
                                    ? <span>{this.state.isloggedinuserId == row.reply_user_id && this.state.isLoggedin == true
                                    ? <i className="fa fa-pencil-square-o" aria-hidden="true" onClick={this.createEditor.bind(this, "editor_" + row.reply_id)} title="Edit this Reply"></i>
                                    : null}</span> 
                                    : <span>{this.state.isloggedinuserId == row.reply_user_id && this.state.isLoggedin == true 
                                    ? <i className="fa fa-save" aria-hidden="true" onClick={this.destroyEditor.bind(this, "editor_" + row.reply_id)} title="Update this Reply"></i> 
                                    : null}
                                    </span>
                                }
                                {this.state.isloggedinuserId == row.reply_user_id && this.state.isLoggedin == true ? <i className="fa fa-trash-o" aria-hidden="true" title="Delete this Reply" onClick={this.deleteReply.bind(this, row.reply_id)}></i> : null}
                            </div>
                        </div>
                    }
                </div>
            )

        return (
            <div className="fluid-container">
                <div className="container" id="forum-replies">
                    <Link className="btn btn-primary" id="previouspage" to="/forumpage">&#8592; Go Back</Link>
                    <div className="row" id="question-user">
                        <div className="col-md-2" id="question-info">
                            <span>{this.state.postDetails.userName}</span>
                        </div>
                        <div className="col-md-8">
                            <h1>{this.state.postDetails.topic_name}</h1>
                            <p>{this.state.postDetails.topic_message}</p>
                        </div>
                        <div className="col-md-2">
                            <p>{'Asked: ' + Moment.utc(this.state.postDetails.created_date).format('YYYY-MM-DD hh:mm A')}</p>
                        </div>
                    </div>
                   {repliesData}
            </div>
        )
    }
}

export default Forumreplies;

标签： reactjs

Answer 1

您可以存储活动编辑器的行 ID，而不是存储布尔值：

setState({ activeEditor: row.id }) 

null当没有编辑器处于活动状态时 将其设置为。

然后在.map您可以检查匹配的ID：

this.state.activeEditor == row.id

如果允许多个活动编辑器，那么您可以使用一个对象/数组/Set来存储状态中的活动编辑器列表。