javascript - 识别无序列表中单击的按钮: React

Question

我刚学习一周，从 Angular 背景中使用react。我在 React 中有以下无序列表。

const QueueManage: React.FC = () => {
      const { queue, setQueue, loading, error } = useGetQueue();
      const [btnState, setBtnState] = useState(state);
      const enterIconLoading = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
            const item = '';
            const btn = '';
            console.log(item, btn);
            setBtnState({ loading: true, iconLoading: true, item: item, btnType: btn });
      };

<ul className="listCont">
   {queue.map(queueItem => (
           <li className="col-12" key={queueItem.id}>
               <div className="row">
                                    <div className="listName col-3">
                                        <p>{queueItem.user.firstName} {queueItem.user.lastName}</p>
                                    </div>

                                    <div className="listName col-5">
                                        <div className="row">
                                            <div className="col-3">
                                                <Button type="primary" loading={btnState.loading} onClick={enterIconLoading}>
                                                    Assign
                                                </Button>
                                            </div>
                                            <div className="col-3">
                                                <Button type="primary" loading={btnState.loading} onClick={enterIconLoading}>
                                                    Absent
                                                </Button>
                                            </div>
                                            <div className="col-3">
                                                <Button type="primary" loading={btnState.loading} onClick={enterIconLoading}>
                                                    Done
                                                </Button>
                                            </div>
                                            <div className="col-3">
                                                <Button type="primary" loading={btnState.loading} onClick={enterIconLoading}>
                                                    Cancel
                                                </Button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </li>
                        )
                        )}
                    </ul>
 }

对于每个列表项，列表项都有按钮，即分配、缺席、完成、取消。我的目标是确定单击了哪个按钮以及哪个列表项，以便我可以为该特定按钮应用加载程序。任何人都可以帮我解释一下如何在我的代码中实现这一目标

这是我得到的列表的直观表示 /image/zilWE.png

此刻，我单击一个按钮，所有按钮都应用了如下所示的微调器:

非常感谢您的帮助和解释。

Answer 1

Reactful 方法涉及将 li 拆分为单独的组件。这将有助于保持每个项目的状态独立。我们称之为QueueItem。

const QueueItem = ({ user }) => {
    const [loading, setLoading] = useState(false)

    function onClickAssign() {
        setLoading(true)
        // do something
        setLoading(false)
    }

    function onClickAbsent() {
        setLoading(true)
        // do something
        setLoading(false)
    }

    function onClickDone() {
        setLoading(true)
        // do something
        setLoading(false)
    }

    function onClickCancel() {
        setLoading(true)
        // do something
        setLoading(false)
    }

    return (
        <li className='col-12'>
            <div className='row'>
                <div className='listName col-3'>
                    <p>
                        {user.firstName} {user.lastName}
                    </p>
                </div>

                <div className='listName col-5'>
                    <div className='row'>
                        <div className='col-3'>
                            <Button type='primary' loading={loading} onClick={onClickAssign}>
                                Assign
                            </Button>
                        </div>
                        <div className='col-3'>
                            <Button type='primary' loading={loading} onClick={onClickAbsent}>
                                Absent
                            </Button>
                        </div>
                        <div className='col-3'>
                            <Button type='primary' loading={loading} onClick={onClickDone}>
                                Done
                            </Button>
                        </div>
                        <div className='col-3'>
                            <Button type='primary' loading={loading} onClick={onClickCancel}>
                                Cancel
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    )
}

这里我还将每个按钮的 onClick 拆分为一个单独的回调，因为它们定义良好并且可能具有独特的行为。上面评论中提到的另一种方法是

function onClickButton(action) {
  ...
}

<Button type='primary' loading={loading} onClick={() => onClickButton('cancel')}>
    Cancel
</Button>

这遵循可能适用于此处的操作/ reducer 模式，而不是状态(useState)