React-final-form с компонентом autocomplite

У меня динамическая форма, и у меня проблема с компонентом Autocomplite из material-ui, когда я подключился к массивам response-final-form-array, не могу получить выбранное значение элемента

вот код формы

<Field
   name={`${name}`.product}
   list={products}
   component={AutocompleteField}
   label={'Products'}
/>

function ProductSelectField({list, label, dealer_id, stock_id, all_stocks, input, ...rest}) {

    const {name, onChange, ...restInput} = input;

    const [value, setValue] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const getProducts = (event, newValue) => {
        setValue(newValue);
    }
    return (
        <Autocomplete
            {...rest}
            id="product"
            options={list}
            getOptionLabel={(option) => option.name}
            defaultValue={list[0]}
            onChange={getProducts}
            inputValue={inputValue}
            onInputChange={(event, newInputValue) => {
                setInputValue(newInputValue);
            }}
            renderInput={(params) =>
                <TextField
                    {...restInput}
                    {...params}
                    label={label}
                    variant="outlined"
                />
            }
        />
    );
}

reactjs react-final-form react-final-form-arrays
person Fatkhullo Badirov    schedule 16.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Без какой-либо дополнительной информации или кода, из которого можно было бы выйти, кажется, что вы не вызываете входной обработчик onChange для обновления состояния полей. В вашем автозаполнении prop.onChange вы вызываете ловушку getProducts, но не в том месте, где вы передаете значение ловушке onChange.

- const {name, onChange, ...restInput} = input; //delete
     <TextField
       - {...restInput} //delete
         {...params}
         label={label}
         variant="outlined"
     />
// spread out the entire input prop into the Autocomplete
<Autocomplete
    {...input}
    {... rest of your props}
/>

Эти документы на React-Final-Form показывают вам что опора input передает, и показывает, как она выполняет всю работу за вас.

Однако я также использую Autocomplete from material-ui и понимаю, что вы хотите одновременно контролировать локальное состояние. Выполните рефакторинг вашего getProducts хука, чтобы обновить оба.

const getProducts = (event, newValue) => {
        setValue(newValue);
        input.onChange(event); // the event will carry over because 'text' and 'select' inputs both return the 'event.target.value' without any extra logic for the Field component.
    }
person Tanner Priest    schedule 17.02.2021