Formik odd (.value) нужен при обновлении formik.values - PullRequest
Новая
       32

Formik odd (.value) нужен при обновлении formik.values

1 голос
/ 17 февраля 2020

Я управляю списком связанных элементов в моей форме с помощью MUIDataTable (инкапсулированного здесь как CrudList) и MUI Автозаполнение.

Мне удалось добавить новые элементы через автозаполнение компонентов onChange и удалить элемент из кнопки, используя почти тот же код. Но мне нужно добавить .value во втором случае, иначе он не рендерится заново.

Что я делаю не так? 

function RelatedModels({name, value ,model, tittle, columns,  optionsSelector, onChange, ...fc}) {
    const formik = useFormikContext();
    const options = useSelector(createSelector(optionsSelector,
                        elements=> elements.filter(item => ! value.some(s=> item.idx === s.idx)))
    );
    const buttons = [
        quickButton(
            idx => () => {
                const a =fc;
                debugger;
                //THIS NOT RE ENDER 
                formik.values[name]=  value.filter(elem => idx !== elem.idx);
                formik.setFieldTouched(name, true, false);
            }
            , 'Eliminar', <Delete/>)
    ];

    return (
        <Paper className="formPanel">
            <h1>{tittle}</h1>
            <Autocomplete
                options={options}
                onChange={(o, newElement)=> {
                   // THIS RE RENDER THE COMPONENT
                    formik.values[name].value =  value.push(newElement);
                    formik.setFieldTouched(name, true, false);
                }}
                renderOption={ (option, state) =>
                    <span>{option.name}</span>
                }
                renderInput={params =>(
                    <MuiTextField {...params}  label="Select to add" margin="normal"   fullWidth/>)
                }
            />

            <CrudList Model={model} columns={columns.concat(buttons)} elements={value} buttons/>
        </Paper> );
}

Я включаю компонент в Formik следующим образом 

   <Field as={RelatedModels}
               name="accessories" model={Accessory} optionsSelector={availableAccessories}
               tittle="Selecciona accesorio a añadir"
               columns={accessoriesColumns}
               />
...