Question

我有一个文本框，可让我输入建筑物名称，然后单击“添加建筑物”按钮，它将获取值并将其传递到下一页。因此，在下面的屏幕快照中，值为“ AbsBuildingOne” '和'AbsBuildingTwo'来自textBox输入。因此，目前，我可以将单个值从textBox传递到下一页，但是我无法理解是否要输入第二个建筑物如何保存此页面中的前一个值，然后在其下面添加第二个值。我想我必须对数组进行处理，但是我无法弄清楚如何进行处理。

当前，我的代码如下所示，用于传递单个值。我添加了一个状态：

   this.state = {
                 textBoxValue: '',
                };

因此，在我的文本框中，onUpdateHandler函数如下所示：

 onClickAddBuildingTextBoxHandler = (inputData) => {
    this.setState({ textBoxValue: inputData.value});
  }

我的textBox组件如下所示。它是为项目设计的自定义textBox：

         <SceTextBox
            placeholder='Enter Building Name'
            id='AddBuilding'
            type='buildingName'
            maxLength='40'
            onTextUpdatedHandler={this.onClickAddBuildingTextBoxHandler.bind(this)}
            forceValidate={this.state.forceValidate}
            validator={app.appUtil.validator}
            isError={this.state.textBoxEmptyError}
            errorMsg={this.errorMessage}
          />

因此，当前我正在将this.state.textBoxValue的值传递给下一个显示建筑物名称的组件。

那么，如何继续使用多个值以及如何保存所有建筑物名称？另外，当我单击关闭图标时，我必须删除建筑物名称。那么，我是否必须使用数组中的push / pop？有人请指导我。

编辑1：

我的新状态如下：

this.state = {
      buildingNames: {
        [id++]: ''
      }
    };

我的两个功能都是：

  onClickAddBuildingButtonHandler = () => {
    const { buildingNames } = this.state;
    this.setState({
      buildingNames: {
        ...buildingNames,
        [id++]:''
      }
    });

    if (!this.state.selectedOptions) {
      this.setState({ isRadioEmptyError: true });

      if (!this.state.buildingNames.id) {
        this.setState({ textBoxEmptyError: true });
      }
    }

    if (this.state.selectedOptions && this.state.buildingNames) {
      this.props.navigateToAddBuilding(this.state.buildingNames);
    }
  }





  onClickAddBuildingTextBoxHandler = (inputData) => {
    const { buildingNames } = this.state;
    this.setState({ 
      buildingNames:{
        ...buildingNames,
        [inputData.id] : inputData.value
      }
    });
  }

Answer 1

要从textarea获取值的数组，可以使用this.state.value.split('\n')在每一行上分别分割字符串，从而为您生成数组。

下面是一个非常简单的示例，演示了其有效性。只需输入textarea并查看控制台即可。换行后，您会看到第二个元素出现在数组中。

function handleKeyUp() {
  const textarea = document.getElementById('my-ta');
  console.log(textarea.value.split('\n'));
}

<textarea id='my-ta' onKeyUp='handleKeyUp()'></textarea>

编辑＃1：

这里是Code Sandbox Example 1，演示了它是如何完成的。输入textarea，换行，再输入一些，然后点击切换按钮。您会看到显示的值，如果您将它们切换回去，它们仍然在文本区域中。

编辑＃2：

因此，这是如何完成操作的另一个示例。这将向您展示如何将项目添加到列表。 Code Sandbox Example 2

我将把两种方法结合起来交给你。

如何从reactJs中的textBox为每个输入值生成一个数组

1 个答案: