Question

我有问题，我想在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};

感谢您的帮助:)

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()函数作为prop传递给AddTasktBox组件。

所以AddTaskBox中的关闭按钮就像

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

您可以像

一样传递它

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

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

2 个答案: