Двухсторонняя связывающая строка, разделенная запятыми

Это мой объект:

const [opportunity, setOpportunity] = useState({
    name: '',
    description: '',
    experience: '',
});

Я хочу сохранить его в свойстве возможности опыта в виде строки, разделенной запятыми. Например, так: «опыт_1, опыт_2, опыт_3».

Но когда я печатаю в поле ввода, я хочу иметь пробел между словами. Например, так: опыт_1 опыт_2 опыт_3

это мой код для поля ввода:

        <InputField
        type='text'
        value={opportunity.experience.split(',').join(' ')} // i think i need changes here
        onChange={(e) => setOpportunity({ ...opportunity, experience: e.currentTarget.value.split(" ").filter(x => x !== '').toString() })} // i think this works
        label={"Experiences"}
    />

Есть ребята помощи?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
0
34
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, это то, что я бы сделал.

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

const [opportunity, setOpportunity] = useState({
    name: '',
    description: '',
    experience: [],
});

затем я бы переместил свой обработчик в его собственную функцию и дал бы ему имя, потому что он делает достаточно, чтобы запутаться.

Теперь этой функции не нужно ничего делать с массивом, так как значение в state является массивом.

const handleInput = e => {
    const experience = e.currentTarget.value.split(" ").filter(x => x !== '')
    setOpportunity({ ...opportunity, experience })
}

Наконец, мы передаем функцию handleInput в реквизит onChange и просто передаем opportunity.experience.join(' ') в реквизит value.


<InputField
    type='text'
    value={opportunity.experience.join(' ')}
    onChange={handleInput}
    label={"Experiences"}
/>

Обратите внимание, если это не очевидно: { ...opportunity, experience } использует «сокращение значения свойства литерала объекта», потому что переменная названа experience, поэтому она такая же, как { ...opportunity, experience: experience }

ItsGeorge 17.05.2022 22:45

Спасибо за ответ. Однако эта строка 'value={opportunity.experience.join(' ')}' в поле ввода по-прежнему не позволяет мне использовать пробелы между словами. Это не решает мою проблему.

Happy Coconut 17.05.2022 23:23
Ответ принят как подходящий

Замените .filter(x => x !== '') на .replace(/\s+/g, " ") и поместите его перед вызовом метода .split(). Это заменит несколько пробелов одним пробелом и не позволит пользователю вводить более одного пробела за раз, позволяя им изменять содержимое вашего компонента InputField. Помните, что .фильтр() работает с клонированной копией строки, а .заменять() работает с самой строкой, которая в данном случае является текущим целевым значением события.

Теперь он должен работать как задумано.

Вот так:

<InputField
    type="text"
    value={opportunity.experience
      .split(",")
      .map((x) => x.trim()) // Added .trim() to keep consistent spacing...
      .join(" ")} // ...before joining
    onChange={(e) => {
      setOpportunity({
        ...opportunity,
        experience: e.currentTarget.value
          .replace(/\s+/g, " ") // If you try to use .filter() here, it won't work
          .split(" ")
          .toString(),
      });
    }} 
    label={"Experiences"}
  />

Я также связал операцию обрезки для каждого значения из свойства состояния с помощью .map(), чтобы сохранить постоянный интервал во время презентации, в случае, если свойство состояния было инициализировано с большим количеством пробелов между каждым значением опыта.

Работает как шарм. Большое спасибо!

Happy Coconut 17.05.2022 23:25

Рад, что смог помочь! Вы можете использовать мое решение с ответом @ItsGeorge, если вы предпочитаете, чтобы массив хранил значения experience. Я проверил оба способа, и это сработало!

Chizaram 17.05.2022 23:34

Спасибо буду иметь в виду!

Happy Coconut 17.05.2022 23:38

Другие вопросы по теме