Asked Aug 3rd, 11:10 AM 56 0 2
  • 56 0 2
+1

Dùng document để check checkbox nhưng ko thay đổi state trong react

Share
  • 56 0 2

em có cái checkbox này

  const [check, setCheck] = useState(false);

  const handleChange = (e) => {
    setCheck(e.target.checked);
  };

  return (
    <input
      type="checkbox"
      className={styles.fixcheck}
      checked={check}
      onChange={handleChange}
    />
  );
};

em mong muốn thay đổi checkbox = code nên đã làm như sau: document.getElementsByClassName('....').checked = true;

checkbox có thay đổi nhưng state của nó lại không đổi, mọi người giúp e vs ạ, e cảm ơn

2 ANSWERS


Answered Aug 3rd, 5:10 PM
Accepted
+1

Ko rõ bạn tại sao muốn làm vậy nhưng muốn dùng js thay đổi giá trị input rồi kéo theo kích hoạt onChange của react thi phải làm như sau:

Đại loại là dispatch event click cho cái input đó.

<div id="app">
</div>

<button onclick="clickButton()">Change input state</button>
<script>
function clickButton() {
  const input = document.querySelector('input');
  Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'checked').set.call(input, !input.checked);
  input.dispatchEvent(new Event('click', { bubbles: true}));
}
</script>

Full demo codepen: https://codepen.io/ohmygodvt95/pen/dyWjggw

=> nói chung không nên làm cách này, hãy chỉ dùng react code thôi.

Share
Answered Aug 3rd, 1:35 PM
0

Sao ở đây bạn lại muốn thay đổi checkbox bằng code như trên nhỉ?

Share
Viblo
Let's register a Viblo Account to get more interesting posts.