ReactJS-如何通过使用子按钮删除整个组件

Question

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

1. onClick正在显示/隐藏AddTaskBox（div中的表单，您必须在其中编写标题和说明）-我做到了。
2. 在可见的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};

感谢帮助 ：）

Answer 1

假设AddTaskComponent表示AddTaskBox ，则将toggleHidden函数传递给AddTaskBox

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

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

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

Answer 2

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

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

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

你可以像这样通过

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