限制反应中的多项选择

Posted 2023-02-22

【中文标题】限制反应中的多项选择

【英文标题】：Limit multiple selection in react

【发布时间】：2021-12-24 05:00:14

【问题描述】：

我试图弄清楚如何限制多选选项中的选择数量。例如：如果我的选项总数为 6，但用户不应选择超过 3 个。 这是我的代码，我正在制作一个基于反应的项目

import * as React from 'react';
import  useTheme  from '@mui/material/styles';
import TextField from '@mui/material/TextField';



function CoFounder() 
    return (
    <>
      <div class="mkw_figure">
       <h1 class="mkw_headline">
        Co Founders Match 
        </h1> 

        <h5 class="mkw_subheadline">
          Get the best matching Co Founder profile to connect and try your startup
        </h5>

        <h3 class="mkw_subheadline" style=fontSize: 'x-large', margin: '0px', float: 'left', marginLeft: '80px', display: 'inline'>
          Co Founder skills you require
        </h3>

        <TextField placeholder="First skill would be priority skill. Type Own or Select from below"></TextField> 

<div id="pill_multiselect" class="pill_multiselect">

    <label class="PillList-item">
  <input type="checkbox" name="feature" onClick="return myfun()" value="1" />
  <span class="PillList-label">Business Development
  <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>

  </span>
</label>
    <label class="PillList-item">
  <input type="checkbox" name="feature" onClick="return myfun()" value="2" />
  <span class="PillList-label">Marketing
  <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>

  </span>
</label> <label class="PillList-item">
  <input type="checkbox" name="feature" onClick="return myfun()" value="3" />
  <span class="PillList-label">Coding
  <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>

  </span>
</label>
<label class="PillList-item">
  <input type="checkbox" name="feature" onClick="return myfun()" value="3" />
  <span class="PillList-label">UI/UX
  <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>
  </span>
</label><label class="PillList-item">
  <input type="checkbox" name="feature" onClick="return myfun()" value="3" />
  <span class="PillList-label">Product Management
  <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>

  </span>
</label><label class="PillList-item">
  <input type="checkbox" name="feature" onClick="return myfun()" value="3" />
  <span class="PillList-label">Leadership
  <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>

  </span>
</label><label class="PillList-item">
  <input type="checkbox" name="feature" onClick="return myfun()" value="3" />
  <span class="PillList-label">Operations
  <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>

  </span>
</label>
  </div>
<div> <span id="not-valid" style=color:'red'> </span></div>

 <button class="mkw_test_apply_btn">Search</button>
      </div>    
    </>
  );



export default CoFounder;

从之前关于这个话题的讨论中，我知道我可以用它来限制选择

 <script type="text/javascript">


        $(document).ready(function() 

          var last_valid_selection = null;

          $('#userRequest_activity').change(function(event) 

            if ($(this).val().length > 3) 

              $(this).val(last_valid_selection);
             else 
              last_valid_selection = $(this).val();
            
          );
        );
        </script>

但是我无法将它复制到我的反应文件中，这给了我错误。请提出解决此问题的方法。

【参考方案1】：

在您的内部onClick 函数增加一个计数器（状态变量），如果它是 3，则禁用复选框，如下所示：

const [counter, setCounter] = React.useState(0);

const myFun = () => 
    setCounter(counter + 1);


return (
    ...
    <input disabled=counter >= 3 ... />
    ...
);

编辑 试试：

<input counter >= 3 ? disabled :  ... />

【讨论】：

您是否尝试过将其合并到代码中，因为这种方法对我不起作用。我仍然可以选择超过 3 个选项。

@JanenderSharma 我添加了一个编辑