Javascript React-解析逗号分隔的用户输入

我有一个输入框，它接受用户输入并将其作为字符串存储在数组中。我希望能够解析输入框中粘贴的字符串，如

值1、值2、值3

。并将这些值解析后分别添加到数组中，（例如）

[“值1”、“值2”、“值3”]

可能有很多不同的方法可以做到这一点，但我一直在考虑，这显然是一个可行的解决方案

关于如何将其集成到将这些值添加到数组的更改处理程序中，我需要一些帮助

我有一个显示当前设置的对话框

如何解析由逗号分隔的用户输入的值列表，并将每个值添加到数组中，同时在

元素中显示值

import React from "react";
import ReactDOM from "react-dom";
import Papa from "papaparse";

const list = "Value1 , value2, value3";
var results = Papa.parse(list);

class App extends React.Component {
  state = {
    selectorValues: [],
    selectorValue: ""
  };

  addSelectorValue = e => {
    e.stopPropagation();
    e.preventDefault();
    this.setState(prevState => ({
      selectorValues: [...prevState.selectorValues, prevState.selectorValue],
      selectorValue: ""
    }));
  };

  removeSelectorValue(index) {
    this.setState({
      selectorValues: this.state.selectorValues.filter((_, i) => i !== index)
    });
  }

  handleSelectorValueChange = ({ target: { value } }) => {
    //makes separate copy of array.
    this.setState({ selectorValue: value });
  };

  render() {
    const { selectorValues } = this.state;

    return (
      <div>
        <form>
          <div>
            <label>Selector Values:</label>{" "}
            <input
              type="text"
              value={this.state.selectorValue}
              placeholder="Enter selector value"
              onChange={this.handleSelectorValueChange}
              required={!this.state.selectorValues.length}
            />
            <button type="button" onClick={this.addSelectorValue}>
              Add
            </button>
          </div>
          <ul>
            {this.state.selectorValues.map((value, index) => {
              return (
                <li key={index}>
                  {value}
                  <button
                    type="button"
                    onClick={this.removeSelectorValue.bind(this, index)}
                  >
                    Remove
                  </button>
                </li>
              );
            })}
          </ul>
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“papaparse”导入Papa；
const list=“Value1、value2、value3”；
var results=Papa.parse（列表）；
类应用程序扩展了React.Component{
状态={
选择器值：[]，
选择器值：“
};
addSelectorValue=e=>{
e、 停止传播（）；
e、 预防默认值（）；
this.setState（prevState=>({
selectorValues:[…prevState.selectorValues，prevState.selectorValue]，
选择器值：“
}));
};
removeSelectorValue（索引）{
这是我的国家({
selectorValues:this.state.selectorValues.filter（（\ux，i）=>i！==index）
});
}
handleSelectorValueChange=（{target:{value}}）=>{
//制作数组的单独副本。
this.setState（{selectorValue:value}）；
};
render（）{
const{selectorValues}=this.state；
返回(
选择器值：{'}
添加

{this.state.selectorValues.map（（值，索引）=>{
返回(

{value}
去除

);
})}

);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您可以使用string方法将

selectorValue

字符串拆分为子字符串，并使用

，

作为分隔符，然后将这些子字符串添加到

selectorValue

数组中

addSelectorValue = e => {
  e.preventDefault();
  this.setState(({ selectorValues, selectorValue }) => ({
    selectorValues: [...selectorValues, ...selectorValue.split(",")],
    selectorValue: ""
  }));
};

类应用程序扩展了React.Component{
状态={
选择器值：[]，
选择器值：“
};
addSelectorValue=e=>{
e、 预防默认值（）；
this.setState（{selectorValues，selectorValue}）=>({
selectorValues:[…selectorValues，…selectorValue.split（“，”），
选择器值：“
}));
};
removeSelectorValue（索引）{
这是我的国家({
selectorValues:this.state.selectorValues.filter（（\ux，i）=>i！==index）
});
}
handleSelectorValueChange=（{target:{value}}）=>{
this.setState（{selectorValue:value}）；
};
render（）{
const{selectorValues}=this.state；
返回(
选择器值：
添加

{this.state.selectorValues.map（（值，索引）=>{
返回(

{value}
去除

);
})}

);
}
}
render（，document.getElementById（“根”））

问题是什么？也许你可以使用
value.split（“，”）
来获取数组中的所有不同值？Thole很好，如果没有逗号作为分隔符怎么办？基本上，我想简化添加这些值的过程，这样它们就不必逐个添加，而是可以将列表粘贴到输入框
“hasNoComma”。拆分（'，'）
将为您提供一个包含一个元素的数组
“hasNoComma”
，这样可能也可以工作。@Thole split很容易放入其中，但从视觉上看，我似乎无法将输入的值分离出来，并在
元素中显示给用户