Question

我有一个表格，其中有一个设置图标作为最后一列，每当用户点击它时，它应该弹出一个设置菜单。要在活动类之间切换我使用state并将其传递给array.map函数，但是当用户点击一个设置图标时，所有菜单同时打开，原因是它们都具有相同的功能单击事件和相同的状态变量。如何将其更改为只有单击的设置图标应打开其菜单的位置？我的代码如下。

import React, { Component, PropTypes } from 'react';
import '../../../assets/custom_css/tables/unstackable_very_basic_striped_users_table.css';
import { v4 } from 'node-uuid';
import Language from '../../../assets/language';

class UnstackableVeryBasicStripedUsersTable extends Component {

    static propTypes = {
        rows: PropTypes.array.isRequired
    };

    constructor(props) {
        super(props);
        this.getTableRows = this.getTableRows.bind(this);
        this.open_setting_menu = this.open_setting_menu.bind(this);
        this.state = {
            is_action_menu_active: false
        };
    }

    getTableRows() {
        const { rows } = this.props;
        return rows.map(row => {
            let drop_down_class = (this.state.is_action_menu_active) ? "active" : "";
            let menu_class = (this.state.is_action_menu_active) ? "transition visible" : "";
            return <tr key={v4()}>
                {row.map(info => {
                    return <td key={v4()}>
                        {info}
                    </td>
                })}
                <td>
                    <div className={"ui right pointing dropdown icon " + drop_down_class} onClick={this.open_setting_menu}>
                        <i className="setting icon"/>
                        <div className={"menu " + menu_class}>
                            <div className="item">Edit</div>
                            <div className="item">Delete</div>
                        </div>
                    </div>
                </td>
            </tr>
        });
    }

    open_setting_menu() {
        this.setState({
            is_action_menu_active: !this.state.is_action_menu_active
        });
    }

    render() {
        return <table className="ui unstackable celled very basic striped table unstackable_very_basic_striped_table">
            <thead>
                <tr>
                    <th>{Language.name}</th>
                    <th>{Language.role}</th>
                    <th>{Language.department}</th>
                    <th>{Language.action}</th>
                </tr>
            </thead>
            <tbody>
                {this.getTableRows()}
            </tbody>
        </table>
    }
}

export default UnstackableVeryBasicStripedUsersTable;

Answer 1

如果要使用单个组件，可以将所选行的索引保存在以下状态：

import React, { Component, PropTypes } from 'react';
import '../../../assets/custom_css/tables/unstackable_very_basic_striped_users_table.css';
import { v4 } from 'node-uuid';
import Language from '../../../assets/language';

    class UnstackableVeryBasicStripedUsersTable extends Component {

        static propTypes = {
            rows: PropTypes.array.isRequired
        };

        constructor(props) {
            super(props);
            this.getTableRows = this.getTableRows.bind(this);
            this.open_setting_menu = this.open_setting_menu.bind(this);
            this.state = {
                selected_row_index: 0,
                is_action_menu_active: false
            };
        }

        getTableRows() {
            const { rows } = this.props;
            return rows.map((row, index) => {
                let drop_down_class = (this.state.is_action_menu_active && this.state.selected_row_index === index) ? "active" : "";
                let menu_class = (this.state.is_action_menu_active && this.state.selected_row_index === index) ? "transition visible" : "";
                return <tr key={v4()}>
                    {row.map(info => {
                        return <td key={v4()}>
                            {info}
                        </td>
                    })}
                    <td>
                        <div className={"ui right pointing dropdown icon " + drop_down_class} onClick={() => this.open_setting_menu(index)}>
                            <i className="setting icon"/>
                            <div className={"menu " + menu_class}>
                                <div className="item">Edit</div>
                                <div className="item">Delete</div>
                            </div>
                        </div>
                    </td>
                </tr>
            });
        }

        open_setting_menu(index) {
            this.setState({
                is_action_menu_active: !this.state.is_action_menu_active,
                selected_row_index: index
            });
        }

        render() {
            return <table className="ui unstackable celled very basic striped table unstackable_very_basic_striped_table">
                <thead>
                    <tr>
                        <th>{Language.name}</th>
                        <th>{Language.role}</th>
                        <th>{Language.department}</th>
                        <th>{Language.action}</th>
                    </tr>
                </thead>
                <tbody>
                    {this.getTableRows()}
                </tbody>
            </table>
        }
    }

    export default UnstackableVeryBasicStripedUsersTable;

React JS将单独的onclick事件分配给表

1 个答案: