时间戳

首页 > 解决方案 > 您将如何重置 onClick 的无线电输入？反应式

reactjs - 您将如何重置 onClick 的无线电输入？反应式

问题描述

一切正常，onClick 过滤器被删除并重置，但无线电输入没有被删除。如何重置无线电输入？

....
....

const [filters, setFilters] = useContext(FilterContext);

const toggleSelection = (e) => {
    setFilters((prevFilters) => ({
      ...prevFilters,
      [e.name]: e.id,
    }));
  };

const resetFilters = () => {
    setFilters({
      guest: 0,
      value: [200, 500],
      type: "",
      bed: "",
      view: "",
    });
  };

return (
...
...
<Categorie>
  <h3>Type</h3>
  <Selector>
    <Selection
     type="radio"
     name="type"
     id="room"
     onClick={(e) => toggleSelection(e.target)}
    />
    <SelectionLabel htmlFor="room">room</SelectionLabel>
    <Selection
     type="radio"
     name="type"
     id="suite"
     onClick={(e) => toggleSelection(e.target)}
    />
    <SelectionLabel htmlFor="suite">suite</SelectionLabel>
  </Selector>
</Categorie>


...
...


<Categorie>
  <Selection id="reset" onClick={resetFilters} />
  <SelectionLabel htmlFor="reset">reset</SelectionLabel>
</Categorie>

)

我环顾四周，弄乱了检查的属性，但无法弄清楚。

标签： reactjsinputreact-hooksradio-button

解决方案

你可以试试useRef()。这个想法是创建对您的无线电输入的引用，以便您可以通过它来控制它们。这是一些代码：

....
....

const [filters, setFilters] = useContext(FilterContext);
const radioRef = useRef();
...

将其分配给元素：


    <Selection
     ref={radioRef}
     type="radio"
     name="type"
     id="room"
     onClick={(e) => toggleSelection(e.target)}
    />

然后像这样使用它：

radioRef.current.checked = false;

这将取消选中链接到的单选按钮radioRef。

这是一个非常基本的沙箱：https ://codesandbox.io/s/hopeful-fermi-y59mf?file=/src/App.js

请注意，这将适用于裸<input ...元素。由于您似乎正在使用某些框架，因此这种方法可能存在问题，但我怀疑会有问题。

推荐阅读