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

在没有任何额外信息或代码框的情况下，您似乎没有调用输入的 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}
/>

These Docs on React-Final-Form 向您展示了 input 道具传递的内容以及它如何为您完成所有工作。

但是，我也使用了 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.
    }

与自动复合组件反应最终形式

1 个答案: