Как отключить кнопку перед тем, как поставить галочку в React?

Question

import React from 'react'
import { Button } from 'react-bootstrap'

const Intro = () => {
    return (
        <section className="landing1">
        <div className="orange-overlay">
          <div className="landing-inner">
            <h1 className="large">
               A fasciniting experience awaits you.
            </h1>
            <h2>
                But before you get started, here are a few points to keep in mind.
            </h2>
            <p>You have 10 minutes to complete all the challenges</p>
            <p>For a better gaming experience, we would recommend a desktop web browser</p>
            <p>Desert Survival is a click and play experience</p>
            <p>Only the score of your first try will be considered, however, you can attempt the experience as many times as you wish</p>
            <p>If you chose to leave the game midway, your progress resets and you will have to start from the beginning</p>
            <p>Make sure your audio is always turn on for maximum effect</p>
            <p>Everything you need is already in the room and just needs to be discovered</p>
            <input type="checkbox"  id="tick" onChange={() => document.getElementById('terms').disabled} />
            <p > I've read the rules</p>
            <Button name="terms" id="terms" disabled >Receive</Button>
            </div>
          </div>
      </section>
    );
  };

  export default Intro;

Answer 1

import React,  { useState} from 'react'

const Intro = () => {
    const [checked, setChecked] = useState('')
    return (
        <section className="landing1">
        <div className="orange-overlay">
          <div className="landing-inner">
            <h1 className="large">
               A fasciniting experience awaits you.
            </h1>
            <h2>
                But before you get started, here are a few points to keep in mind.
            </h2>
            <p>You have 10 minutes to complete all the challenges</p>
            <p>For a better gaming experience, we would recommend a desktop web browser</p>
            <p>Desert Survival is a click and play experience</p>
            <p>Only the score of your first try will be considered, however, you can attempt the experience as many times as you wish</p>
            <p>If you chose to leave the game midway, your progress resets and you will have to start from the beginning</p>
            <p>Make sure your audio is always turn on for maximum effect</p>
            <p>Everything you need is already in the room and just needs to be discovered</p>
            <input type="checkbox"  checked={checked} id="tick" onChange={() => setChecked(!checked) } />
            <p > I've read the rules</p>
            <button name="terms" id="terms" disabled={checked} >Receive</button>
            </div>
          </div>
      </section>
    );
  };

  export default Intro;

Answer 2

, как упоминалось в некоторых комментариях, похоже, что вы делаете это не так, как React. Я сделал быструю модификацию, используя useState, чтобы обработать состояние и соответствующим образом изменить его. Взгляните:

import React, { useState } from 'react'
import { Button } from 'react-bootstrap'

const Intro = () => {
  const [hasChecked, setHasChecked] = useState(false)

  return (
    <section className="landing1">
      <div className="orange-overlay">
        <div className="landing-inner">
          <h1 className="large">A fasciniting experience awaits you.</h1>
          <h2>But before you get started, here are a few points to keep in mind.</h2>
          <p>You have 10 minutes to complete all the challenges</p>
          <p>For a better gaming experience, we would recommend a desktop web browser</p>
          <p>Desert Survival is a click and play experience</p>
          <p>
            Only the score of your first try will be considered, however, you can attempt the
            experience as many times as you wish
          </p>
          <p>
            If you chose to leave the game midway, your progress resets and you will have to start
            from the beginning
          </p>
          <p>Make sure your audio is always turn on for maximum effect</p>
          <p>Everything you need is already in the room and just needs to be discovered</p>
          <input type="checkbox" id="tick" onChange={() => setHasChecked((checked) => !checked)} />
          <p> I've read the rules</p>
          <Button name="terms" id="terms" disabled={!hasChecked}>
            Receive
          </Button>
        </div>
      </div>
    </section>
  )
}

export default Intro

Я использую hasChecked в качестве управления состоянием, которое будет true или false в зависимости от того, было ли какое-либо изменение для флажка, изначально он установлен на false (useState(false)). disabled={!hasChecked} означает, что он установит для свойства disabled кнопки значение true, если hasChecked значение false