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

我有一个文本框，允许我输入建筑名称，点击“添加建筑”按钮后，它获取值并将其传递到下一页。因此，在下面的屏幕截图中，值“AbsBuildingOne”和“AbsBuildingTwo”来自文本框输入。因此，目前我可以将单个值从文本框传递到下一页，但我无法理解，如果我想进入第二栋建筑，我如何在该页面中保存上一个值并在其下方添加第二个值。我想我必须使用数组，但我不知道如何继续

目前，我的代码在传递单个值时如下所示。我添加了一个状态：

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

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

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

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

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

         <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}
          />

我的两项职能是：

  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
      }
    });
  }

---

要从

textarea

获取值数组，您可以使用

this.state.value.split（'\n'）

在为您生成数组的每一新行上分离字符串

下面是一个非常简单的例子，证明了它的有效性。只需输入文本区域，然后查看控制台。创建新行后，您将看到第二个元素出现在数组中

函数handleKeyUp（）{
const textarea=document.getElementById（'my-ta'）；
console.log（textarea.value.split（'\n'））；
}

---

感谢您的解决方案。问题是名称可以有多个单词。因此，当我输入我的第一个建筑名称时，它可以是两个或更多的单词。然后，当我导航回上一页以输入第二个建筑名称时，这两个名称都应保存。如果要在组件之间保存状态，则需要使用状态管理系统，如，或将状态保存到树中较高的组件中。如果您的项目还没有像redux或mobx这样的东西，我建议将状态提升到更高的组件。这是官方的react指南：是的，这里没有使用redux。那么，是否没有其他选择像将数据存储在状态中作为道具传递给另一个一样，我的意思是，使用状态和道具这是不可能的？对不起，我不知道该怎么做，我只是想从状态开始做。是的，这就是提升状态的意义所在。如果您有两个兄弟组件需要知道相同的状态，那么您需要将状态存储在这两个组件的父组件中，并通过道具将信息传递给它们。@pranami为您演示了一个快速而直接的示例。链接在我答案的底部。