Javascript 单击“反应”时删除组件

由于我是新的反应，我有问题如何删除组件时，点击按钮旁边的组件。在下面的代码中，我通过道具将“click”传递给货币组件，并将其分配给“onClick”事件处理程序。我希望它应该删除组件时，点击按钮。然而，我觉得我做错了什么——什么也没发生。 谁能帮帮我吗

    import React, { Component } from "react";
    import NumberFormat from "react-number-format";
    import Currency from "./Currency";


     class Currencies extends Component {
      state = {
        inputField: 0,
        exRates: 0,
        opened: true,
      };

      [....]

      BTCChangeHandler = (event) => {
        this.setState({ inputField: event.target.value });
      };

      removeComponentHandler = () => {
        this.setState({ opened: false });
      };

      render() {
        [...]


        return (
          <div>
            <input
              type="number"
              placeholder="Enter BTC value"
              onChange={this.BTCChangeHandler}
            />
            <Currency name="USD" value={usd} click={this.removeComponentHandler} />
            <Currency name="GPB" value={gbp} click={this.removeComponentHandler} />
            <Currency name="EUR" value={eur} click={this.removeComponentHandler} />
          </div>
        );
      }
    }
    export default Currencies;

import React，{Component}来自“React”；
从“反应数字格式”导入数字格式；
从“/Currency”导入货币；
类扩展组件{
状态={
输入字段：0，
汇率：0，
是的，
};
[....]
BTCChangeHandler=（事件）=>{
this.setState（{inputField:event.target.value}）；
};
removeComponentHandler=（）=>{
this.setState（{opened:false}）；
};
render（）{
[...]
返回(
);
}
}
出口违约货币；

使用

onClick

not

单击

<Currency name="USD" value={usd} onClick={this.removeComponentHandler} />

从“React”导入React，{Component}；
从“反应数字格式”导入数字格式；
从“/Currency”导入货币；
类扩展组件{
状态={
输入字段：0，
汇率：0，
开放1：是的，
是的，
开放式3：是的，
};
[....]
BTCChangeHandler=（事件）=>{
this.setState（{inputField:event.target.value}）；
};
removeComponentHandler=（名称）=>（）=>{
this.setState（{[name]：false}）；
};
render（）{
[...]
返回(
{this.state.opened1？
：null}
{this.state.opened2？
：null}
{this.state.opened3？
：null}
);
}
}
出口违约货币；

是否要删除绑定到该按钮的货币组件？是。每个组件都有一个按钮，“单击”后，我想删除该组件。请检查下面我的解决方案，它适用于所有货币组件。这将卸载所有货币组件，但如果您想以类似方式仅删除一个，则可以对每个货币组件执行此操作，并对每个组件使用不同的状态值。谢谢。嗯，它会删除所有组件。我需要一个一个。根据你的要求修改代码。如果这能解决你的问题，请投票表决。

import React, { Component } from "react";
    import NumberFormat from "react-number-format";
    import Currency from "./Currency";


     class Currencies extends Component {
      state = {
        inputField: 0,
        exRates: 0,
        opened1: true,
        opened2: true,
        opened3: true,
      };

      [....]

      BTCChangeHandler = (event) => {
        this.setState({ inputField: event.target.value });
      };

      removeComponentHandler =(name)=> () => {
        this.setState({ [name]: false });
      };

      render() {
        [...]


        return (
          <div>
            <input
              type="number"
              placeholder="Enter BTC value"
              onChange={this.BTCChangeHandler}
            />
            {this.state.opened1?
            <Currency name="USD" value={usd} click= 
            {this.removeComponentHandler("opened1")} /> :null}
            {this.state.opened2?
            <Currency name="GPB" value={gbp} click= 
            {this.removeComponentHandler("opened2")} /> :null}
            {this.state.opened3?
            <Currency name="EUR" value={eur} click= 
            {this.removeComponentHandler("opened3")} /> :null}

          </div>
        );
      }
    }
    export default Currencies;