在降档Reactjs中保存默认值

Question

如何显示默认值，当用户打开它时，它应该显示默认值，并且用户也可以更改它。我在这里使用了link- 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>

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

Answer 1

您可以在getInputProps中使用defaultValue value而不是value