将默认值保存在降档反应中

Question

如何显示默认值，当用户打开它时，它应该显示默认值，用户也可以更改它。我从这里使用， 链接- https://scotch.io/tutorials/5-most-common-dropdown-use-cases-solved-with-react-downshift#toc-downshift-with-axios 此代码在 MF.jsx 下作为回报。

<Downshift
onChange={downshiftOnChange}
itemToString={(item) => (item ? item._source.name : "")}
>
{({
selectedItem,
getInputProps,
getItemProps,
highlightedIndex,
isOpen,
inputValue,
getLabelProps,
}) => (
<div>
<label
style={{ marginTop: "1rem", display: "block" }}
{...getLabelProps()}
>
Mutual Fund scheme Name
</label>
<input
{...getInputProps({
placeholder: "Enter Mutual Fund Name...",
onChange: changeInput,
style: { width: "100%" },
value: props.values,
})}
/>
{isOpen ? (
<div className="downshift-dropdown">
{list.map((item, index) => (
<div
className="dropdown-item"
{...getItemProps({ key: index, index, item })}
style={{
backgroundColor:
highlightedIndex === index ? "lightgray" : "white",
fontWeight: selectedItem === item ? "bold" : "normal",
}}
>
{item._source.name}
</div>
))}
</div>
) : null}
</div>
)}
</Downshift>

在输入标签内，在我传递了 props.values 的值中，它显示了来自父级的数据，但是，我无法更改输入中的任何内容。 如果你知道降档。 请告诉我该怎么做？ 我想从道具加载数据。我也可以改变它。

Answer 1

您可以使用defaultValue值而不是getInputProps中的值

Answer 2

一种选择是放弃useCombobox钩子的Downshift组件。然后可以指定：

initialInputValue: initialValue, // sets when initialized
defaultInputValue: initialValue, // sets on reset or when an item is selected

文档：

• 初始输入值
• 默认输入值