Блог

Главная - Вопросы по программированию - Javascript React Не может считывать свойства null

Javascript React Не может считывать свойства null

#javascript #css #reactjs #checkbox

Вопрос:

Я пытаюсь установить флажок, который динамически изменяет имя класса другого тега. Вот мой код :

 import "bootstrap/dist/css/bootstrap.min.css";
class Task extends Component {
  state = {
    task: "DevApp",
  };

  isChecked = () => {
    console.log("True");
    return true;
  };
  render() {
    return (
      <React.Fragment>
        <span className="bg-warning">{this.state.task}</span>
        <label>
          <input type="checkbox" id="myCheck" />
        </label>
        <span className={this.getClassBadge()}>Done</span>]
      </React.Fragment>
    );
  }

  getClassBadge() {
    var x = document.getElementById("myCheck").checked;
    if (x) {
      return "badge m-2 bg-warning";
    } else {
      return "badge m-2 bg-primnary";
    }
  }
}

export default Task;

И я получаю
TypeError: Cannot read properties of null (reading 'checked')

Я пробовал этот способ :

   render() {
    return (
      <React.Fragment>
        <span className="bg-warning">{this.state.task}</span>
        <label>
          <input type="checkbox" id="myCheck" />
        </label>
        <span className={this.getClassBadge()}>Done</span>]
      </React.Fragment>
      <script>
        getClassBadge() {
          var x = document.getElementById("myCheck").checked;
          if (x) {
            return "badge m-2 bg-warning";
          } else {
            return "badge m-2 bg-primnary";
          }
        }
      </script>
    );
  }

но все подчеркнуто красным.
Я хотел бы установить флажок, и если флажок установлен, имя класса следующего промежутка изменится, чтобы иметь крутой эффект.
Кто-нибудь, пожалуйста, может мне помочь?
Извините, если это очень просто, но я только начинаю 🙂

Комментарии:

1. Добро пожаловать в SO! Я не хочу вас обидеть, но вы, возможно, захотите потратить некоторое время на изучение некоторых учебных пособий для React, чтобы лучше понять рабочий процесс. Вообще говоря, вы не должны выполнять какие-либо прямые запросы DOM или манипуляции при использовании React-если вы видите document.getElementById или что-то подобное, это хороший признак того, что вы, возможно, следуете антипаттерну. Идея React (и большинства библиотек MV*) заключается в том, что у вас есть модель данных, и вы подключаете пользовательский интерфейс к этой модели данных, а затем просто обновляете модель данных и соответственно обновляете пользовательский интерфейс.

2. Я бы рекомендовал вам просмотреть некоторые фактические коды реакции, содержащие флажок. Потому что это неправильный способ сделать это.

Ответ №1:

Это TypeError: Cannot read properties of null (reading 'checked') происходит потому, что при первом рендеринге ваш флажок с этим идентификатором еще не установлен в DOM. Из-за этого document.getElementById("myCheck") возвращается значение null.

Большую часть времени в React вы не должны использовать функции объекта документа.

Вместо этого вы должны использовать состояние React. Поскольку вы используете компонент класса, вы можете использовать this.state, чтобы иметь свойство, значение которого указывает, установлен ли флажок или нет. Для флажка нужен обработчик изменений, что-то вроде

<input type="checkbox" id="myCheck" onChange={(state) => this.setState({isChecked: !state.isChecked})} />

Затем войдите getClassBadge , просто проверьте состояние:

 return this.state.isChecked
  ? "badge m-2 bg-warning"
  : "badge m-2 bg-primnary"
Метки: