react-final-form 與自動完成組件

Question

當我與 react-final-form-arrays 連接時，我有動態表單並且 material-ui 的 Autocomplite 組件存在問題，無法獲取所選項目值

這是表單代碼

<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"
                />
            }
        />
    );
}

Answer 1

如果沒有任何額外的信息或代碼框到 go 關閉，您似乎沒有調用輸入的onChange掛鈎來更新字段 state。 在您的 Autocomplete 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 prop 傳遞的內容，並展示了它如何為您完成所有工作。

但是，我也使用 material-ui 的自動完成功能，並且了解您想同時控制本地 state。 重構您的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.
    }