Реагируйте, чтобы onClick работал только один раз на компоненте

Question

Здравствуйте, я пытаюсь построить форум на сайте.У меня есть простые категории и комментарии.У меня есть кнопка, которая отображает текстовое поле для ввода комментария к категории, но когда я нажимаю кнопку, она открывает текстовые поля для каждой категории.Я просто хочу одно текстовое поле.Вот код, который у меня есть.Любая помощь будет оценена.Спасибо

state = { showing: true };

renderLists(categories) {
  const { showing } = this.state;

  if (categories == null) return <div />;
  return (
    <ul className="ul">
      {categories.map(category => {
        return (
          <li id={category._id} className="categories" key={category._id}>
            {category.name}

            <Posts categ={category._id} />
            <button
              className="label"
              onClick={() => this.setState({ showing: !showing })}
            >
              Add Comment
            </button>
            {showing ? (
              <div>
                <form method="post" action="/post/create-posts">
                  <input type="text" name="body" />

                  <input type="hidden" name="cat" value={category._id} />
                  <input type="submit" value="Submit" />
                </form>
              </div>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
}

render() {
  return (
    <div>
      <main className="categories">
        {this.renderLists(this.state.category)}
      </main>
    </div>
  );
}

Answer 1

Вы можете установить динамическое состояние для каждой вашей категории.Я сделал это ниже.Изначально этого не было в государстве.При нажатии на кнопку будет обновлено состояние с новым ключом (например, categoryName) как true.Я исправил это как тумблер.Если требуемый ключ равен true, он станет ложным.

item.state = { showing: true };

renderLists(categories) {
  const { showing } = this.state;

  if (categories == null) return <div />;
  return (
    <ul className="ul">
      {categories.map(category => {
        let categoryName = category.name  // get the categoryName in variable

        return (
          <li id={category._id} className="categories" key={category._id}>
            {category.name}

            <Posts categ={category._id} />
            //You can also access the object values by using bracket ([]) notation. You can set the dynamic state with unique key, may be we use name as key here
            <button
              className="label"
              onClick={() => {(this.state[categoryName] != undefined) ? (this.state[categoryName] ? this.setState({ [categoryName]: false }) : this.setState({ [categoryName]: true })) : this.setState({ [categoryName]: true })} } 
            >
              Add Comment
            </button>
            {this.state[categoryName] ? (
              <div>
                <form method="post" action="/post/create-posts">
                  <input type="text" name="body" />

                  <input type="hidden" name="cat" value={category._id} />
                  <input type="submit" value="Submit" />
                </form>
              </div>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
}

render() {
  return (
    <div>
      <main className="categories">
        {this.renderLists(this.state.category)}
      </main>
    </div>
  );
}

Answer 2

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

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

Сохранение идентификатора текущих активных элементов в состояние и проверка, активен ли этот элемент или нет, может быть простым решением.Это также гарантирует, что только одна форма будет активной.Если вам нужно активировать несколько форм, вы можете изменить приведенный ниже код, чтобы он содержал массив идентификаторов и проверял, существует ли идентификатор в массиве или нет.Эта реализация также требует, чтобы вы удалили идентификатор из массива при повторном щелчке, чтобы удалить форму для этого элемента.

Образец

state = { showing: ''};

renderLists(categories) {
  const { showing } = this.state;

  if (categories == null) return <div />;
  return (
    <ul className="ul">
      {categories.map(category => {
        return (
          <li id={category._id} className="categories" key={category._id}>
            {category.name}

            <Posts categ={category._id} />
            <button
              className="label"
              {/* Save item's id to state */}
              onClick={() => this.setState({ showing: category._id })}
            >
              Add Comment
            </button>
            {/* check item's id */}
            {(showing === category._id) ? (
              <div>
                <form method="post" action="/post/create-posts">
                  <input type="text" name="body" />

                  <input type="hidden" name="cat" value={category._id} />
                  <input type="submit" value="Submit" />
                </form>
              </div>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
}