javascript - 仅显示一个属性，但保存整个对象（React Final Form + Downshift）

Question

这个问题可能已经解决了，但我发现的例子对我没有多大帮助。

• 降档版本：6.1.0
• 节点版本：14.15.4
• npm 版本：6.14.10
• 反应版本：17.0.1

你做了什么： 试图在输入字段上显示一个对象属性，但我想保存整个对象

发生了什么： 对象保存得很好，但我不能在输入中只显示一个属性

<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 在downshift github上的解决方案：

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