Question

我有一个组件，其中有一个用于建筑物名称的文本区域和一个删除图标。文本来自在文本框中输入的值，因此用户可以添加多个建筑物。该页面如下所示：

因此，当我们单击添加其他建筑物时，我们将被重定向到上一页，我们可以在其中输入建筑物名称，然后新建筑物将被添加到建筑物阵列中，如下所示。

因此，我的用于显示输入建筑物名称页面和输入建筑物名称列表的代码如下所示：

{
            (this.state.addBuildingFirstPage && !this.state.closeBuildingHeader) ?
              <BuildingContent
                buildingNames={this.state.buildingNames}
                onClickAddBuildingButtonHandler={this.onClickAddBuildingButtonHandler}
                onClickShowBuildingListHandler={this.onClickShowBuildingListHandler}
                onClickAddBuildingTextBoxHandler={this.onClickAddBuildingTextBoxHandler}
                navigateToDashboardHandler={this.props.navigateToDashboardHandler}
                getBuildingRadioButtonValueHandler={this.props.getBuildingRadioButtonValueHandler}
                hideAddBuildingImageHandler={this.hideAddBuildingImageHandler} 
                openBuildingNameComponentHandler={this.openBuildingNameComponentHandler} />
              :

              (this.state.openBuildingNameComponent ?
                <BuildingName

                  deleteBuildingFlag={this.state.deleteBuildingFlag}
                  buildingNames={this.state.buildingNames}
                  onClickDeleteBuildingIconHandler={this.onClickDeleteBuildingIconHandler}
                  onClickAddAnotherBuildingButtonHandler={this.onClickAddAnotherBuildingButtonHandler}
                  navigateToAddressPageHandler={this.props.navigateToAddressPageHandler}
                  navigateToDashboardHandler={this.props.navigateToDashboardHandler}
                  navigateToAddPropertHandler={this.props.navigateToAddPropertHandler} />
                : null)
          }

因此<BuildingContent />组件是我们在文本框中输入建筑物名称的组件。 <BuildingName />组件是显示建筑物列表的组件，即所附屏幕截图的组件。

当前，我的问题是删除特定建筑物。

所以，到目前为止，我已经写了一个回调函数：

onClickDeleteBuildingIconHandler = () => {
    this.setState({ deleteBuildingFlag: true });
  }

并将其作为道具传递给<BuildingName />组件。

我的<BuildingName />组件如下所示：

{!this.props.deleteBuildingFlag ?
          (this.props.buildingNames.map((building, i) => {
            return (
              <div className={classes.sceFullWd} key={'building' + i}>
                <div className={classes.sceBuildingNameContainer}>
                  <div className={classes.sceBenchmarkingBuildingName}>
                    {building}
                  </div>
                  <button
                    className={classes.sceCloseIcon}
                    onClick={this.props.onClickDeleteBuildingIconHandler}>
                    <i className={"fas fa-times " + classes.sceBuildingCloseIcon} />
                  </button>
                </div>
              </div>
            );
          }))
          : null}

但是我不明白如何为建筑物的特定删除设置状态。那么，如何进行？

Answer 1

如果要定位列表中的特定条目，建议使用在地图中生成的键。因此，我建议对此进行更改：

// entry will be the key of the list
onClickDeleteBuildingIconHandler = entry => {
    this.setState({ deleteBuilding: entry });
  }

并在组件中：

{this.props.buildingNames.map((building, i) => {
  if (this.props.deleteBuildingFlag == i) {
    return null;
    }
            return (
              <div className={classes.sceFullWd} key={'building' + i}>
                <div className={classes.sceBuildingNameContainer}>
                  <div className={classes.sceBenchmarkingBuildingName}>
                    {building}
                  </div>
                  <button
                    className={classes.sceCloseIcon}
                    //use the key here 
                    onClick={() => this.props.onClickDeleteBuildingIconHandler(i)}>
                    <i className={"fas fa-times " + classes.sceBuildingCloseIcon} />
                  </button>
                </div>
              </div>
            );
          })

Answer 2

如果您不能或不希望删除建筑物onDelete事件，则应使用带有name和isDelete标志的对象数组进行操作：

this.props.buildingObjects.map((building, i) => {
  if (building.isDeleted) {
    return null;
  }

  return (
    <div className={classes.sceFullWd} key={'building' + i}>
      <div className={classes.sceBuildingNameContainer}>
        <div className={classes.sceBenchmarkingBuildingName}>
          {building.name}
        </div>
        <button
          className={classes.sceCloseIcon}
          onClick={this.props.onClickDeleteBuildingIconHandler(building)}>
            <i className={"fas fa-times " + classes.sceBuildingCloseIcon} />
        </button>
      </div>
    </div>
  );
})

onClick事件应如下所示：

onClickDeleteBuildingIconHandler = (buildingObj) => {
  return () => {
    buildingObj.isDeleted = true;
    // Also you'll need call setState to rerender buildings
    this.setState({ deleteBuildingFlag: !this.state.deleteBuildingFlag });
  }
}

或者您可以避免使用对象和函数的路径索引，而只需从数组中删除索引。但这取决于实现和您的愿望。

如何为数组映射中的特定索引设置状态

2 个答案: