僅顯示一個屬性，但保存整個 object（React Final Form + Downshift）

Question

這個問題可能已經解決了，但我發現的例子對我沒有多大幫助。

• 降檔版本：6.1.0
• 節點版本：14.15.4
• npm 版本：6.14.10
• 反應版本：17.0.1

你做了什么：試圖在輸入字段上顯示 object 屬性，但我想保存整個 object

發生了什么： object 保存得很好，但我不能在輸入中只顯示一個屬性

 <Field name={`${name}.product`} items={productList} index={index} component={DownShiftInput} placeholder="Name" />;

 const itemToString = item => { return item? item: ''; }; const DownShiftInput = ({ input, meta, placeholder, items, index, ...rest }) => ( <Control name={placeholder} my={4}> <FormLabel htmlFor={placeholder}>{placeholder}</FormLabel> <Downshift {...input} onInputValueChange={inputValue => { input.onChange(inputValue); }} itemToString={itemToString} selectedItem={input.value} > {({ getInputProps, getItemProps, getLabelProps, isOpen, inputValue, highlightedIndex, selectedItem, }) => { const filteredItems = matchSorter(items, inputValue, { keys: ['name'], maxRanking: matchSorter.rankings.STARTS_WITH, }); return ( <div className="downshift" style={{ position: 'relative' }}> <Input {...getInputProps({ name: input.name, placeholder, })} /> {isOpen &&.:filteredItems,length && ( <div className="downshift-options" style={{ background: 'white', position: 'absolute', top: '100%', left: 15, right: 0, zIndex. 4, }} > {filteredItems.map((item. index) => { return ( <div {.:.getItemProps({ key, item,id, index: item: style? { backgroundColor: highlightedIndex === index, 'lightgray': 'white'? fontWeight: selectedItem === item, 'bold', 'normal'. }; })} > {item;name} </div> ); })} </div> )} </div> ); }} </Downshift> <Error name={placeholder} /> </Control> );

謝謝！

Answer 1

用戶lcordier42在降檔 github上的解決方案：

 <Input {...getInputProps({ name: input.name, placeholder, value: selectedItem.name, })} />