reactjs React我一次选一个

b1zrtrql 于 2022-12-29 发布在 React

关注(0)|答案(2)|浏览(97)

const [filters, setFilters] = useState({
    category: '',
    
  });

const makeFilter = (property, newFilterValue) => () => {
    setFilters({
        ...filters,
        [property]: newFilterValue,
    });
};

<ul>
                    <li onClick={makeFilter('category', 'Access Control System')}>Access Control System</li>
                    <li onClick={makeFilter('category', 'Accessories')}>Accessories</li>
                    <li onClick={makeFilter('category', 'Auto Door System')}>Auto Door System</li>
                    <li onClick={makeFilter('category', 'Backup Battery')}>Backup Battery</li>
                    <li onClick={makeFilter('category', 'Card & Weigand Reader')}>Card & Weigand Reader</li>
                    <li onClick={makeFilter('category', 'CCTV Recorders')}>CCTV Recorders</li>
                    <li onClick={makeFilter('category', 'CCTV Security Camera System')}>CCTV Security Camera System</li>
                    <li onClick={makeFilter('category', 'Display Monitor')}>Display Monitor</li>
                    <li onClick={makeFilter('category', 'Draka Cable')}>Draka Cable</li>
                    <li onClick={makeFilter('category', 'IP PBX System')}>IP PBX System</li>

我通过onClick在li中使用了我的过滤器功能。是否可以使li一次只能选择一个？

reactjs

来源：https://stackoverflow.com/questions/74936449/react-li-choose-one-at-a-time

2条答案

按热度按时间

rhfm7lfc1#

点击时应为onClick={() => makeFilter('property', 'newFilterValue')}
请更换所有的锂

<li onClick={makeFilter('category', 'Access Control System')}>Access Control System</li>

与

<li onClick={() => makeFilter('category', 'Access Control System')}>Access Control System</li>

赞(0）回复(0）举报 2022-12-29

bpzcxfmw2#

我不确定我是否正确地解释了您的问题，但我相信您会好奇是否可以使它一次只能选择一个<li>元素。
使用<input>元素和共享相同name的type="radio"可以最容易地实现这一点。

<ul>
        <li><input type="radio" name="age">20-30 years</input></li>
        <li><input type="radio" name="age">30-40 years</input></li>
        <li><input type="radio" name="age">40-50 years</input></li>
        <li><input type="radio" name="age">50-60 years</input></li>
        <li><input type="radio" name="age">60-70 years</input></li>
    <ul>

在这里，所有的input都有相同的name，所以如果你选择一个然后尝试选择另一个它将删除以前的选择。

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs React我一次选一个

2条答案

相关问题

热门标签

最新问答