无法在 ReactJS 中重用复选框功能

Posted

技术标签:

【中文标题】无法在 ReactJS 中重用复选框功能【英文标题】:Cannot re-use checkbox functions in ReactJS 【发布时间】:2019-08-05 05:12:48 【问题描述】:

我有一个映射函数,它将 JSON 值显示为复选框,每个复选框触发另外 2 个复选框,我使用的 JSON 有一个最小值/最大值,我创建了一个函数来设置每个部分中复选框选择的最小值/最大值,这两个功能都可以正常工作。但是,问题是,一旦单击父复选框并展开以显示 2 个功能复选框,然后我重做单击它以缩小它并再次单击它以展开它的过程,子复选框将不再可单击。

复选框值作为道具从 Checkbox.js 传递到发生 fetch/map 的 Itemlist.js。如果有人能解释或演示如何实现这一点,将不胜感激。

React 实时片段:https://codesandbox.io/embed/oo059p7q19?fontsize=14

Checkbox.js

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

class Checkboxes extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      currentData: 0,
      limit: 2,
      checked: false
    ;
  

  selectData(id, event) 
    let isSelected = event.currentTarget.checked;
    if (isSelected) 
      if (this.state.currentData < this.props.max) 
        this.setState( currentData: this.state.currentData + 1 );
       else 
        event.preventDefault();
        event.currentTarget.checked = false;
      
     else 
      if (this.state.currentData > this.props.min) 
        this.setState( currentData: this.state.currentData - 1 );
       else 
        event.preventDefault();
        event.currentTarget.checked = true;
      
    
  

  render() 
    const input2Checkboxes =
      this.props.options &&
      this.props.options.map(item => 
        return (
          <div className="inputGroup2">
            " "
            <div className="inputGroup">
              <input
                id=this.props.childk + (item.name || item.description)
                name="checkbox"
                type="checkbox"
                onChange=this.selectData.bind(
                  this,
                  this.props.childk + (item.name || item.description)
                )
              />
              <label
                htmlFor=this.props.childk + (item.name || item.description)
              >
                item.name || item.description" "
                /** <img src=this.props.img  /> <span className="pricemod">props.childprice SAR</span>
                 */
              </label>
            </div>
          </div>
        );
      );

    return (
      <form className="form">
        <div>
          /** <h2>this.props.title</h2>*/
          <div className="inputGroup">
            <input
              id=this.props.childk + this.props.name
              name="checkbox"
              type="checkbox"
              checked=this.state.checked
              onChange=this.selectData.bind(
                this,
                this.props.childk + this.props.uniq
              )
              onChange=() => 
                this.setState( checked: !this.state.checked );
              
            />
            <label htmlFor=this.props.childk + this.props.name>
              this.props.name" "
            </label>
          </div>" "
          this.state.checked ? input2Checkboxes : undefined
        </div>
      </form>
    );
  


export default Checkboxes;

【问题讨论】:

【参考方案1】:

我调试了你的代码。您没有在 Checkbox 组件中设置状态。 看看 selectData 方法。条件:

this.state.currentData < this.props.max

this.state.currentData > this.props.min

条件只有一次为真,因为 min 和 max 属性太小(我调试时为 1),所以第一次选择后条件总是为假。

合适的解决方案:

    删除

event.preventDefault(); event.currentTarget.checked = true; 在 else 语句中(输入是不受控制的组件)

    在 else 语句中调用 setState

【讨论】:

我明白了,那么合适的解决方案是什么? 你应该使用setState而不是event.currentTarget.checked = false;设置检查标志无法更新您的 UI,因为 React 仅在调用 setStateforceUpdate 后更新 dom @AlxL 我之前的评论有点错误。输入是不受控制的组件,所以你也可以在 else 语句中删除event.preventDefault(); event.currentTarget.checked = true; 当我删除 event.preventDefault(); & event.currentTarget.checked = true; ,它删除了我添加的将复选框的最小限制设置为 1 的功能,并且使复选框不可点击的故障仍然存在,您可以在此处检查它codesandbox.io/embed/oo059p7q19?fontsize=14

以上是关于无法在 ReactJS 中重用复选框功能的主要内容,如果未能解决你的问题,请参考以下文章

映射复选框内的复选框 ReactJS

如何设置默认选中复选框ReactJS?

选中复选框时将对象推送到数组中,并在 ReactJS 中未选中复选框时删除对象

使用带有 reactjs 和 redux 的 Material-ui 复选框

reactjs多个复选框

如何删除 Material UI DataGrid (Reactjs) 中的特定行