React select изменить выбранное значение - PullRequest
Новая
       23

React select изменить выбранное значение

0 голосов
/ 16 апреля 2020

Я связываюсь, чтобы собрать несколько предметов. моя структура данных бэкэнда представляет собой массив таких объектов 

{
"selectedItems": [
      {"_id" : ""}
   ]
}

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

{
"selectedItems": [
      {"value" : "", label : ""}
   ]
}

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

const ItemSelected = () => {
    const items = [
        {
            _id : "123", name : "john", desc : 'eb'
        },
        {
            _id : "456", name : "doe", desc : 'ec'
        },
        {
            _id : "789", name : "seal", desc : 'ef'
        }
    ]

    const itemList = (options) => {
        return (
            options &&
            options.map(option => {
                return {
                    value: option._id,
                    label: option.name
                };
            })
        );
    }

    return(
        <div>
            <Formik
                initialValues={{
                    selectedItems  : []
                    }}

                onSubmit={values => {
                    console.log(values)
                }}
            >
                    {({
                          values,
                          handleSubmit,
                          setFieldValue

                      }) => (
                        <Form onSubmit={handleSubmit}>
                            <div className="row">
                                <div className="col">
                                    <Select
                                        isMulti
                                        name={`selectedItems`}
                                        value={values.selectedItems}
                                        onChange={e=>setFieldValue(`selectedItems`, e)}
                                        options={itemList(items)}
                                        className="basic-multi-select"
                                        classNamePrefix="select"
                                    />
                                </div>
                                <div className="col">
                                    <button type="submit">
                                        submit
                                    </button>
                                </div>
                            </div>
                        </Form>
                    )}
                </Formik>
        </div>
    )
}

1 Ответ

2 голосов
/ 16 апреля 2020

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

onSubmit={values => {
  if(values.selectedItems){
    const data = values.selectedItems.map(value => ({_id: value.value}))
    console.log(data);
  }
}}
...