清除 React 中的复选框列表

Question

我的项目中有一些以编程方式生成的复选框列表（不受控制），我希望有一种反应方式可以通过单击按钮来清除它们。我的问题是，我无法分别引用它们。

我尝试过设置引用，但我似乎无法弄清楚如何在无状态子级和它的父级之间共享引用（这可能吗？）

我只需要一个按钮，单击该按钮即可取消选中所有复选框。我从来没有想到这会如此复杂，但我已经做了一个小时了，我的头开始旋转。以下是其中一个列表的示例：

{props.filters[0].map(jobType => (
  <li key={_.uniqueId('subType_')} className="checkbox text-sm m-b-sm">
    <label className="">
      <input type="checkbox" value={jobType.value} name="subtype" onChange={props.handleFilterCheck} />
      <span>{jobType.title}</span>
    </label>
    <span className="text-muted"></span>
  </li>
))}

所以我有一种方法来一致地引用列表的大小，并且我知道如果我有一种方法来引用列表，我可以使用迭代，但就目前情况而言，这是不可能的。有什么想法吗？

Answer 1

我尝试过设置引用，但我似乎无法弄清楚如何在无状态子级和它的父级之间共享引用（这可能吗？）

使用功能组件是不可能的。

refs

仅适用于类组件。

另一个建议是将所有复选框转换为受控输入，然后使用 props 传入

false

的选中状态。

或者将复选框移动到它自己的组件中来处理自己的状态：

{props.filters[0].map(jobType => (
    <li key={_.uniqueId('subType_')} className="checkbox text-sm m-b-sm">
        <CheckBox 
            value={jobType.value} 
            label={jobType.title}  
            onChange={props.handleFilterCheck}
            checked={/* Here you can manually override the checked state by passing in a bool */}
        />
        <span className="text-muted"></span>
    </li>
))}


class CheckBox extends Component {
    constructor (props) {
        super(props);
        this.state = {
            checked: props.checked || false
        }
    }
    render() {
        const { value, title, handleFilterCheck } = this.props;
        const { checked } = this.state;
        return (
            <label className="">
                <input type="checkbox" value={value} name="subtype" onChange={handleFilterCheck} checked={checked} />
                <span>{title}</span>
            </label>
        )
    }
}

编辑：

最后但并非最不重要的一点是，您可以使用纯 JS 和 dom 操作直接定位所有元素并将 check 设置为 false。

document.querySelectorAll('input[type=checkbox]').forEach( el => el.checked = false );

Answer 2

我通过创建

<Checkbox />

组件列表成功解决了同样的问题。然后在父级别我使用数组状态，它保存所有检查的值。

<Checkbox />

组件的属性之一是布尔值，它告诉父数组状态是否为空。

const Parent = (someList) => {
  const [checkedArray,setCheckedArray] = useState([]);
  
  return(
    someList.map(el => <Checkbox key={el}
                                 empty={checkedArray.length === 0}
                                 value={el.value} /> 
                                 );
                                 );
                                 };
const Checkbox = ({empty, value}) => {
  const [checked, setChecked] = useState(false);
  
  useEffect(() => {
        empty && setChecked(false);
    }, [empty]);
    
  return(
    //some checkbox JSX
    );
    };

我是新手，所以可能会有一些陷阱。

Answer 3

我也是为了同样的问题而来，做了一些思考，并想出了一种更“React”的方式。

我使用复选框作为输入查询参数以调用 api 的方式。我们可以使用状态来跟踪当前选中的复选框。但是，在渲染这些复选框时，我们可以将选中的属性设置为以编程方式连接到我们的状态。如果复选框的值处于状态，请选中它。否则，不要。

然后我们可以设置一个按钮来在单击时重置此状态。因为状态更改会重新渲染组件，所以所有复选框都会重新渲染 - 将选中设置设置为 false。

const [selectedBoxes, setSelectedBoxes] = useState([]);
const renderCheckboxes = (items) => {
  return items.map(item => (
    <div key={item.id}>
      <input value={item.id} onChange={handleCheckbox} name="categories" checked={selectedBoxes.includes(item.id)} />
    </div>
  )
}
const handleCheckbox = (e) => {
  setSelectedBoxes([...selectedBoxes, e.target.value]);
}
return (
  <div>
    {renderCheckboxes()}
    <button onClick={setSelectedBoxes([])}>Click Me</button>
  </div>
)

Answer 4

秘诀就在这里！将状态传递给输入，而不仅仅是逻辑。

而不只是

      <input value={item.id} onChange={handleCheckbox} name="categories" checked={selectedBoxes.includes(item.id)} />

用这个

selectedBoxes && selectedBoxes.includes(item.id)}

：

      <input value={item.id} onChange={handleCheckbox} name="categories" checked={selectedBoxes && selectedBoxes.includes(item.id)} />

当

selectedBoxes

的状态发生变化时，这将触发重新渲染。