Reactjs 对组件仅执行一次onClick操作

你好，我正在尝试建立一个论坛网站。我有简单的分类和评论。我有一个按钮，显示一个文本框来输入对某个类别的评论，但当我单击该按钮时，它会打开每个类别的文本框。我只想要一个文本框。这是我到目前为止的代码。任何帮助都将不胜感激。谢谢

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>
  );
}

state={showing:true}；
渲染列表（类别）{
const{showing}=this.state；
if（categories==null）返回；
返回(

{categories.map（category=>{
返回(

{category.name}
this.setState（{showing:！showing}）}
>
添加注释
{显示(
)：null}

);
})}

);
}
render（）{
返回(
{this.renderList（this.state.category）}
);
}

由于您使用一个状态值控制表单的呈现，因此当状态值更改时，每个项目的任何表单都会呈现表单

您应该在state上设置一个唯一的值，以便每次显示单个表单

将当前活动项id保存到状态并检查该项是否处于活动状态可以是一个简单的解决方案。这也确保了只有一个表单处于活动状态。如果需要激活多个表单，可以更改下面的代码以保存id数组，并检查该id是否存在于数组中。此实现还要求您在第二次单击以删除该项的表单时从数组中删除id

样本

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>
  );
}

state={显示：'}；
渲染列表（类别）{
const{showing}=this.state；
if（categories==null）返回；
返回(

{categories.map（category=>{
返回(

{category.name}
您可以为每个类别设置动态状态。我已在下面进行了设置。最初它不在状态中。单击按钮后，它将使用新键（如categoryName）更新状态为true。我已将其固定为toggle。如果所需键为true，则它将变为false

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>
  );
}

item.state={显示：true}；
渲染列表（类别）{
const{showing}=this.state；
if（categories==null）返回；
返回(

{categories.map（category=>{
让categoryName=category.name//获取变量中的categoryName
返回(

{category.name}
//您还可以使用括号（[]）表示法访问对象值。您可以使用唯一键设置动态状态，可能我们在此处使用名称作为键
{（this.state[categoryName]！=未定义）？（this.state[categoryName]？this.setState（{[categoryName]：false}）：this.setState（{[categoryName]：true}）：this.setState（{[categoryName]：true}）}
>
添加注释
{this.state[类别名称](
)：null}

);
})}

);
}
render（）{
返回(
{this.renderList（this.state.category）}
);
}
只需创建另一个组件，比如Category，并在那里保持
的showing
状态。这更模块化，性能更高，可以防止重新呈现整个列表。您也可以这样做：This.setState（{showing:categoryID}），并且仅当This.state.showing==Category.\u id