Question

我想建立一个多选项目。我的后端数据结构是这样的对象数组

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

react-select的问题是当我选择一个或多个项目时，该结构与我的后端路由不匹配，它显示如下

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

我正在与Formik合作管理表单，您还可以在控制台日志上的sandbox上查看结果

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

Answer 1

处理提交时，您需要使用map创建所需的数据结构。

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

反应选择更改所选值

1 个答案: