限制反应中的多项选择

Question

我试图弄清楚如何限制多选选项中的选择数量。例如：如果我的选项总数为 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>

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

Answer 1

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

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

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

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

编辑
试试：

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