javascript - 在 React/TypeScript 中的循环内切换 CSS 类

Question

想知道是否有人可以帮助我添加一个小功能到我正在构建的组件中。

我有一个 List 组件，它接收从 DocumentDB 传递的数据作为 prop。列表循环遍历它并生成一个漂亮的表格，其中包含数据和一些复选框、切换开关等。 /image/rBU6H.png

我希望能够使用我拥有的切换/开关组件(这基本上是一个花哨样式的复选框)来设置或删除每行上的事件类。我使用状态字段在每一行上设置一个类，确定它是事件还是非事件。

我遇到的问题是允许多个行同时处于事件状态 - 例如，第 1 行和第 2 行都处于关闭/非事件状态。如果我按下第 1 行上的开关来激活它，那么按下第 2 行上的开关也会将其标记为事件状态，而不是关闭第 2 行。我就是不知道如何连接它。

以下是一些传递的示例数据:

1: {
    id: "0729aba6-4d35", 
    firstName: "First", 
    lastName: "Last", 
    fullName: "First Last", 
    email: "first@last.com", 
    status: 1, //active
    …
}

This is a stripped down version of the component (删除了与我正在做的事情没有任何关系的绒毛):

import * as React from 'react';

interface IListProps {
    columns: Array<IColumns>;
    keyString: string,
    listItems: {
        [keyString: string]: any
    };
    selectable?: boolean;
}

export interface IColumns {
    attribute: string;
    displayName?: string | Object;
    sortable?: boolean;
    type: string;
}

interface IListItem {
    active?: boolean;
    selectable?: boolean;
    data: Object;
}

class List extends React.Component<IListProps, any> {

    public render() {

        const items = [];

            for (let key in this.props.listItems) {
                const item		= this.props.listItems[key];
                const listKey	= this.props.keyString;

                items.push(
                    <div key={item[listKey]} className={`row -${(item.status && item.status === 1) ? 'active': 'inactive'} -key-${item[listKey]}`}>
                    {
                        <div className={`col -column-checkbox`} key={index}>
                            <Checkbox id={`check-${item[listKey]}`} className="round" />
                        </div>
                        <div className={`col -column-toggle`} key={index}>
                            <Toggle value={`${item.status}`} activeState={item.status} id={`toggle-${item[listKey]}`} name={`toggle-${item[listKey]}`} />
                        </div>
                        <div className={`col -column-toggle`} key={index}>
                            <Avatar small userName={item.userName} />
                            <span className="label">
                                <strong>{item.fullName}</strong>
                            </span>
                        </div>
                    }
                );
            }
            return (
            <div className={'list'} id={'list'}>
                {items}
            </div>
        );
    }
}

export default List;

如果只是打开和关闭单行，我想我可以通过传递另一个 Prop 或其他东西来管理它，只是无法完全弄清楚如何独立更改循环内多行上的事件类。

Answer 1

到目前为止，在这段代码中我们可以看到:

<List>其中包含 listItems作为 Prop 。这意味着它是只读的。 然后用它来查找行的类。

您想要在单击 Toggle 时更改行的类成分。 这是表达您想要改变的另一种方式 listItems .

所以你需要一个方法作为 Prop 传递给 <Toggle>像这样:

<Toggle onToggle={this.toggle} />

然后是 <List> 中的方法像这样:

toggle = function (id) {
    return this.props.toggleStatus(id);
}

然后在保持状态 listItems 的更高组件中，您可以“真正”更改正确 ID 的状态。

这个想法是将变化从子级冒泡到父级。 child 只是提醒 parent 它已经改变了。然后父级成为其父级的子级并对其发出警报。等等，直到不再有 parent ，因为你已经处于状态所在的位置。这就是您更改它的地方。