Yêu cầu thg 8 3, 2021 11:10 SA 253 0 2
  • 253 0 2
+1

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

Chia sẻ
  • 253 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 CÂU TRẢ LỜI


Đã trả lời thg 8 3, 2021 5:10 CH
Đã được chấp nhận
+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.

Chia sẻ
Đã trả lời thg 8 3, 2021 1:35 CH
0

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

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí