ReactJS - 如何使用子按钮删除整个组件答案

【问题标题】：ReactJS - How to remove whole component , by using child buttonReactJS - 如何使用子按钮删除整个组件
【发布时间】：2023-04-02 17:07:01
【问题描述】：

我有问题，我想在 ReactJS 中创建 TODO 应用程序，并且有这样的功能：

onClick 正在显示/隐藏 AddTaskBox（在 div 中的表单，您必须在其中编写标题和描述） - 我做到了。
在可见的 AddTaskBox 中是带有“x”的按钮，我想用他删除整个“AddTaskBox” - 无法弄清楚:(

我对 React 很陌生，我对那个库的想法可能是错误的。

我的代码：

import React from 'react';
import ReactDOM from 'react-dom';

class AddButton extends React.Component{

  constructor(){
      super();

      this.state = {
      isHidden: false
    }
  }

  toggleHidden () {
      this.setState({
        isHidden: !this.state.isHidden
      })
  }

  render(){
    return(
      <div>
        <div
          onClick={this.toggleHidden.bind(this)}
          className="addtask__btn">
          +
        </div>
        {this.state.isHidden && <AddTaskBox />}
      </div>
    );
  }
}

class AddTaskBox extends React.Component{
  render(){
    return(
      <div className="addtask__box" >
        <button> x </button> // here is my x to close component
        <form>
          <input type="text" placeholder="Nazwa Czynności"/>
          <textarea>
            Opis czynności do wykonania
          </textarea>
          <input className="btn" type="Submit" value="Submit"/>
        </form>
      </div>
    );
  }
}

export {AddButton, AddTaskBox};

感谢您的帮助:)

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

假设AddTaskComponent 你的意思是AddTaskBox 你会将toggleHidden 函数传递给AddTaskBox

{this.state.isHidden && <AddTaskBox onClose={this.toggleHidden.bind(this)} />}

然后在点击时从子级调用函数

<button onClick={this.props.onClose}> x </button>

【讨论】：

【解决方案2】：

您可以将 toggleHidden() 函数作为道具传递给 AddTasktBox 组件。

所以你在 AddTaskBox 中的关闭按钮会像

...
<button onClick={this.props.handleClick}> x </button>
...

你可以这样传递

{this.state.isHidden && <AddTaskBox handleClick={this.toggleHidden.bind(this)} />}

【讨论】：