1

当我与 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"
                />
            }
        />
    );
}
4

1 回答 1

1

如果没有任何额外的信息或代码框可以关闭，您似乎没有调用输入的onChange钩子来更新字段状态。在您的 Autocompleteprop.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 的文档向您展示了inputprop 传递的内容，并展示了它如何为您完成所有工作。

但是，我也使用 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.
    }
于 2021-02-17T23:10:11.317 回答