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