Блог

Главная - Вопросы по программированию - Реагировать — разбирать пользовательский ввод через запятую

Реагировать — разбирать пользовательский ввод через запятую

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть поле ввода, которое принимает пользовательский ввод и сохраняет его в виде строки в массиве. Я хочу иметь возможность анализировать вставленную строку в поле ввода, например Value 1, Value 2, Value 3 . И проанализируйте эти значения, а затем добавьте их отдельно в массив, (например) ["Value 1", "Value 2", "Value 3"]

Вероятно, есть много разных способов сделать это, но я смотрел на Papaparse, и это, безусловно, кажется жизнеспособным решением.

Мне могла бы понадобиться некоторая помощь в том, как интегрировать это в мой обработчик изменений, который добавляет эти значения в массив.

У меня есть пример «песочницы», который показывает текущую настройку.

Как я могу проанализировать введенный пользователем список значений, разделенных запятой, и добавить каждое значение в массив, одновременно отображая значение в <li> элементе?

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

Комментарии:

1. В чем вопрос?

2. Может быть, вы могли бы использовать value.split(",") для получения всех разных значений в массиве?

3. @Tholle хороший момент, что, если нет запятых, которые выступали бы в качестве разделителя? В принципе, я хочу упростить процесс добавления этих значений, чтобы их не нужно было добавлять одно за другим, а вместо этого можно было вставить список в поле ввода

4. "hasNoComma".split(',') выдаст вам массив с одним элементом "hasNoComma" , так что это тоже может сработать.

5. @Tholle split было достаточно легко вставить туда, но визуально я, похоже, не могу разделить введенные значения и отобразить их обратно пользователю в <li> элементах

Ответ №1:

Вы могли бы использовать строковый метод, split чтобы разбить selectorValue строку на подстроки с , разделителем и добавить их в свой selectorValues массив.

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

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

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

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

  handleSelectorValueChange = ({ target: { value } }) => {
    this.setState({ selectorValue: value });
  };

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

    return (
      <div>
        <form onSubmit={this.addSelectorValue}>
          <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>
              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>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>