尝试输入换行符会创建一个逗号

Question

我正在尝试将一些逻辑集成到我的 Web 应用程序中，该应用程序是使用 React 编写的。 我有一个 textArea 组件，从 Semantic-UI 导入，我试图在其中提取每个新行并存储到一个数组中。 目前 textArea 组件仅将数据存储为字符串。

render() {
  <Form.TextArea key={input.name} name={input.name} label={input.label} value={this.props.values[input.name] || ""} onChange={this.props.onChange}/>;

其中value是由换行符分隔的字符串，例如：

test\\ntesting\\n123

我尝试使用下面的代码在每个新行上拆分，该代码将数据存储在一个数组中，就像我想要的那样。 但这正在取代我在 textArea 中用逗号创建新行 [按 ENTER] 的尝试，这不是我对 UX 的渴望。

value={this.props.values[input.name].split('\\n')

我的 textArea 组件最终看起来像这样：

test,testing,123

我想要的结果是这样的：

test
testing
123

如何在将每个新行存储在数组中的同时实现我想要的 textArea 组件用户体验？ 非常感谢！

Answer 1

如果您只希望数组将其发送到 db 或存储在 localStorage 中，则不需要将其保持在 state 中。 保持正常的 textarea 值处于状态。

onChange={event => this.setState({ text: event.target.value}) }

当您想将其发送到 db 时，您可以将其转换为字符串数组

onSubmit: () => this.postToDb(this.state.text.split('\n'))

Answer 2

问题是您试图将类型array值分配给string道具。 我猜，在你的TextArea组件数组中的某个地方转换成一个字符串。 由于Array.prototype.toString方法返回一个表示由逗号连接的数组项的字符串，因此您有逗号分隔的字符串。 仅在将字符串发送到后端或用于其他逻辑目的时才需要拆分字符串，但对于TextArea组件，最好保持原样。

Answer 3

很难说出您使用该数组的目的，这可能会影响答案。

最简单的方法是不将文本区域的内容存储为数组，而是将值存储为正常状态。 如果您需要将它作为数组发送到某个后端/数据库，则可以在发送数据时进行转换。 例如：

state = {
  value: '',
};

...

onChange = (value) => this.setState({ value });

onSubmit = () => {
  const myValueArray = this.state.value.split('\n');
  // now make your network request with myValueArray
}

如果您确实需要处于状态的数组，一种解决方案可能是通过在调用 onChange 方法时设置两个状态项来简单地复制您的状态，例如

state = {
  value: "", // this is the actual text box value with /n characters
  valueArray: [], // this is your array where each newline is an item
};

...

onChange = (value) => {
  this.setState({ value, valueArray: value.split('\n')} );
};

或者，您可以在数组传递给您的组件时将其加入。 .join() 方法将连接每个数组项，可选择在每个项之间插入一个字符串。 例如

<Form.TextArea ... value={this.props.values[input.name].join('\n')} />;

请注意，根据您的用例，这种方式可能会对性能产生负面影响