Я хочу показать опции Multiselect в простом тексте в reactjs с помощьюact-select - PullRequest
Новая
       6

Я хочу показать опции Multiselect в простом тексте в reactjs с помощьюact-select

1 голос
/ 18 марта 2020

Я хочу показать все свои опции в простом тексте, например «firstOption, secOption». Я использую реагирующий выбор. но я не мог найти никакого решения. Вот мой код 

import React from 'react';
import CreatableSelect from 'react-select/creatable';
const PersonalDetails =()=>{

const [selectedbusiness,setselectedbusiness] = useState([]);
const businessChange = (selectedbusiness) => {
 setselectedbusiness(selectedbusiness);
}

const businessType = [
       {  label: "Retailers", value: "Retailers" },
       { label: "Health Practioners", value: "Health Practioners" },
       {  label: "Distributors", value: "Distributors" },
       {  label: "Food Service", value: "Food Service" },
       {  label: "Manufacturers", value: "Manufacturers" },
       {  label: "Business Service", value: "Business Service" },
       {  label: "Investor", value: "Investor" },
       {  label: "Blogging", value: "Blogging" },

     ];

return(
  <>
<CreatableSelect 
  options={ businessType }
  className="form__field form-control"
  isMulti
  onChange={businessChange}
  styles={{ singleValue: (base) => ({ ...base, padding: 5, borderRadius: 5, background: selectedbusiness.value, color: 'white', display: 'flex' }) }}
   defaultValue={ selectedbusiness }
   name="selectedbusiness"
   closeMenuOnSelect={false}
   placeholder="Select Business Type"
   />
</>
)
}

1 Ответ

2 голосов
/ 18 марта 2020 
const showOptions = () => {
    const formattedOptions = selectedbusiness.map(business => business.label).join(',');
    // printing the options to the console
    console.log(formattedOptions);
}

вы можете перебирать selectedbusiness и получать их label и использовать метод join для создания форматированной строки параметров. 

return(
    <>
  <CreatableSelect 
    options={ businessType }
    className="form__field form-control"
    isMulti
    onChange={businessChange}
    styles={{ singleValue: (base) => ({ ...base, padding: 5, borderRadius: 5, background: selectedbusiness.value, color: 'white', display: 'flex' }) }}
     defaultValue={ selectedbusiness }
     name="selectedbusiness"
     closeMenuOnSelect={false}
     placeholder="Select Business Type"
     />
    <button type="button" onClick={showOptions}>Show options</button>
  </>
  )
...