Question

我正在从此链接获取帮助 how to set value in dropdown in react js?

设置dropdown的值。但它不是下拉菜单中的值。

几秒钟后我获得下拉数据3000，然后我需要在下拉菜单上设置值

应选择预期的输出奥兰群岛。 { key: "ax", value: "ax", text: "Aland Islands" },

这是我的代码 https://codesandbox.io/s/sharp-rhodes-140fm

const SingleSelectAutoComplete = props => {
  const { onSearchChange, input, label, data, value } = props;
  return (
    <div>
      <label>{label}</label>
      <Dropdown
        {...props.input}
        clearable
        fluid
        search
        closeOnChange
        onChange={(e, data) => {
          return input.onChange(data.value);
        }}
        onSearchChange={onSearchChange}
        selection
        options={data}
        value={value}
        placeholder="Select Country"
      />
    </div>
  );
};




const val = "ax";
  const [state, setState] = useState([]);
  const [value, setValue] = useState([]);

  setTimeout(() => {
    setState(data);
    setValue("ax");
  }, 2000);

Answer 1

由于使用的是最终形式，因此不会传递值，如果传递的是名为“值”的道具，它将消失，将其命名为其他任何东西，它就会显示出来。在这种情况下，我将其称为helloWorld

也许您应该研究最终表单的工作方式，因为我仅将其发布为“它确实在做某事”，我不知道为什么这样做，或者您应该如何使用它。

const SingleSelectAutoComplete = props => {
  const { onSearchChange, helloWorld, label, data,onChange } = props;
  return (
    <div>
      <label>{label}</label>
      <Dropdown
        {...props.input}
        clearable
        fluid
        search
        closeOnChange
        //use the onChange function passed from App
        //it will set the App state
        onChange={(e, data) => {
          onChange(data.value);
        }}
        onSearchChange={onSearchChange}
        selection
        options={data}
        //pass value as helloWorld or final form will make
        //prop disappear if you call the prop value
        helloWorld={value}
        placeholder="Select Country"
      />
    </div>
  );
};

在应用中：

function App() {
  const [state, setState] = useState([]);
  //removed val and setting val in the timeout
  //you just pass the value to the useState function
  const [value, setValue] = useState("ax");

  setTimeout(() => {
    setState(data);
  }, 2000);
  //log to show that setValue is used when you change input
  console.log('value:',value)
  return (
    <div style={{ width: 600, margin: "0 auto" }}>
      <RFFORM
        onSubmit={onSubmit}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <SForm onSubmit={handleSubmit}>
            <RFField
              component={SingleSelectAutoComplete}
              label=""
              name="ag"
              placeholder=""
              required={true}
              //passing value prop doesn't seem to do anything
              //calling it helloWorld and it'll show up
              helloWorld={value}
              data={state}
              //pass setValue as onChange or user will not be able to change it
              onChange={setValue}
            />

Answer 2

React Final Form的全部要点是 it 为您管理表单值，因此您不应传递value所管理的useState。

如果您需要使用外部的某些值初始化（或重新初始化）表单，请将其传递给initialValues。这是一个工作示例。您选择的组件所需的value在...input内部。

为什么在react js中的下拉菜单中未设置值（所有已设置值的道具）？

2 个答案: