Блог

Главная - Вопросы по программированию - Очистить список компонентов, нажав кнопку

Очистить список компонентов, нажав кнопку

#reactjs

#reactjs

Вопрос:

Я хочу очистить список добавленных разделов, нажав кнопку ОЧИСТИТЬ, кнопка ДОБАВИТЬ работает с дублирующим div, но я не знаю, как понять, как должна работать кнопка ОЧИСТИТЬ.

 import React from "react";
import ChildComponent from "./ChildComponent";
import ParentComponent from "./ParentComponent";

class A extends React.Component {
    state = {
      numChildren: 0
    }
  
    render () {
      const children = [];
  
      for (var i = 0; i < this.state.numChildren; i  = 1) {
        children.push(<ChildComponent key={i} number={i} />);
      };
  
      return (
        <ParentComponent addChild={this.onAddChild}>
          {children}
        </ParentComponent>
      );
    }
  
    onAddChild = () => {
      this.setState({
        numChildren: this.state.numChildren   1
      });
    }
  }

  export default A;
  

import React from "react";

const ChildComponent = props => <div>{"I am child "   props.number} </div>;

export default ChildComponent;


import React from "react";
import {Button} from '@material-ui/core';
import AddIcon from "@material-ui/icons/Add";



const ParentComponent = props => (
    <div className="card calculator">
         <Button href="#" onClick={props.addChild} >
            <AddIcon />
            ADD
          </Button> 
          <Button href="#" >
          CLEAR
          </Button>
      <div id="children-pane">
        {props.children}
      </div>
    </div>
  );

  export default ParentComponent;

введите описание изображения здесь

Я хочу очистить список добавленных разделов, нажав кнопку ОЧИСТИТЬ, кнопка ДОБАВИТЬ работает с дублирующим div, но я не знаю, как понять, как должна работать кнопка ОЧИСТИТЬ.

Ответ №1:

Ваша кнопка очистки должна просто установить значение numChildren равным 0.

Добавьте это в свой класс A:

 clearChildren = () => {
  this.setState({
    numChildren: 0
  })
}

передайте этот метод ParentComponent

 <ParentComponent addChild={this.onAddChild} clearChildren={this.clearChildren}>
          {children}
        </ParentComponent>

назначьте это кнопке ОЧИСТИТЬ

 <Button href="#" onClick={props.clearChildren}>
          CLEAR
          </Button>

Ответ №2:

в компоненте обновить реквизиты

 <ParentComponent addChild={this.onAddChild} removeChilds={this.onRemoveChilds} {children}</ParentComponent>

и добавить функцию удаления

 onRemoveChilds = () => {
  this.setState({
     numChildren: 0
  });
};

Затем в ParentComponent

 <button href="#" onClick={props.removeChilds}>
  CLEAR
</button>