选择限制功能不适用于复选框表单reactjs答案

【问题标题】：selection limit function not working on checkbox form reactjs选择限制功能不适用于复选框表单reactjs
【发布时间】：2019-08-02 04:11:29
【问题描述】：

我有一个从 json 提取复选框的反应组件，复选框的每个部分最多可以包含 5 个复选框，我正在尝试将每个部分中的限制设置为最多 2 个选择，但是它无法正常工作，主要组件是 itemlist.js，复选框来自 checkbox.js，这是我正在尝试做的实时 sn-p，https://codesandbox.io/embed/84lo55n689?fontsize=14 ，更改是在 checkbox.js 中进行的，我注释掉了该函数并更改以进行演示，因为它会使应用程序崩溃。

Checkbox.js

    import React from "react";
import "./Checkbox.css";

/* class Checkboxes extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    currentData: [],
    limit: 2

  }}
 componentDidMount() {

  selectData(id, event){
    let isSelected = event.currentTarget.checked;
    if (isSelected) {
      if (this.state.currentData.length < this.state.limit) {
        this.setState({ currentData: [...currentData, id] })
      }
    }
    else {
      this.setState({
        currentData:
          this.state.currentData.filter((item) => id !== item)
      })
    }
  }}
 render() { */

const Checkboxes = props => {
  const id = /*this.*/ props.childId + /*this.*/ props.childp;

  return (
    <form className="form">
      <div>
        <h2>{/*this.*/ props.title}</h2>
        {/*this.*/ props.options &&
          /*this.*/ props.options.map(item => {
            return (
              <div className="inputGroup">
                <input
                  id={id + item.name}
                  name="checkbox"
                  type="checkbox"
                  //     checked={this.state.currentData.indexOf(id + item.name) >= 0}
                  //  onChange={this.selectData.bind(this, id + item.name)}
                />
                <label htmlFor={id + item.name}>{item.name} </label>
              </div>
            );
          })}
      </div>
    </form>
  );
}; //}}

export default Checkboxes;

Itemlist.js

...

  <Checkboxes
                        key={index}
                        title={item.name}
                        myKey={index}
                        options={item.children}
                        childk={item.id}
                      />
...

【问题讨论】：

如果我听不懂的话。你只需要能够调用 2 个复选框？
@JordiCastillo 是的，所以如果弹出窗口在一个部分下显示 5 个复选框，我只能检查其中的 2 个，而其他 3 个不能点击。
checkbox.js 的“点击”事件在哪里？
// checked={this.state.currentData.indexOf(id + item.name) >= 0} // onChange={this.selectData.bind(this, id + item.name) } 我想..
这不可能是因为被评论了！

标签： javascript reactjs checkbox ecmascript-6 web-applications

【解决方案1】：

无需知道全局中检查或未检查哪个元素，

首先将this.state中的currentData改为0

constructor(props) {
    super(props);
    this.state = {
      currentData: 0,
      limit: 2
    };
  }

然后改变selectData函数

selectData(id, event) {
    let isSelected = event.currentTarget.checked;
    if (isSelected) {
      if (this.state.currentData < this.state.limit) {
        this.setState({ currentData: this.state.currentData+1 });
      }else{
        event.preventDefault()
        event.currentTarget.checked = false;
      }
    } else {
      this.setState({currentData: this.state.currentData - 1});
    }
  }

并从输入中删除选中的属性（当页面加载为 0 时） '

<div className="inputGroup">
   <input
       id={id + item.name}
       name="checkbox"
       type="checkbox"
       onChange={this.selectData.bind(this, id + item.name)}
   />
<label htmlFor={id + item.name}>{item.name} </label>
</div>

https://codesandbox.io/s/j4yyx9v6l5?fontsize=14

【讨论】：