how to set value in dropdown in react js?

问题

could you please tell me how to set value in dropdown in react js ? I am getting dropdown data after few seconds 3000 and then I need to set value on dropdown

const App = ({ children }) => {
  const val = "ax";
  const [state, setState] = useState([]);
  setTimeout(() => {
    setState(countryOptions);
  }, 2000);
  return (
    <Container style={{ margin: 20 }}>
      <Example countryOptions={state} />
    </Container>
  );
};

https://codesandbox.io/s/semantic-ui-example-utev4 expected output Aland Islands should be selected. { key: "ax", value: "ax", text: "Aland Islands" },

as after three second I want to select this element

const val = "ax";

回答1:

As stavros answer suggested; it may be better to keep state in App component and pass the setVal to the dropdown:

App:

const App = ({ children }) => {
  const [state, setState] = useState([]);
  //added val and setVal in App state
  const [val,setVal]=useState('ax');
  setTimeout(() => {
    setState(countryOptions);
  }, 2000);
  return (
    <Container style={{ margin: 20 }}>
      //pass val and setVal so dropdown can set val on change
      <Example countryOptions={state} val={val} onChange={setVal}/>
    </Container>
  );
};

Dropdown:

const DropdownExampleClearableMultiple = ({ countryOptions,val,onChange }) => (
  <Dropdown
    clearable
    fluid
    search
    closeOnChange
    selection
    options={countryOptions}
    //set value to passed in val
    value={val}
    //use setVal that was passed in as onChange
    onChange={(_,i)=>onChange(i.value)}
    placeholder="Select Country"
  />
);

回答2:

You should update your question because only after visiting the codesandbox was I able to get enough info for an answer..

In your index.js you should update setState(countryOptions) to :

setState({countryOptions:countryOptions},()=>setState({val:"ax"})

Then line 39 to :

<Example countryOptions={state.countryOptions:countryOptions} val={state.val} />

Then in your example.js update const DropdownExampleClearableMultiple to:

const DropdownExampleClearableMultiple = ({ countryOptions, val }) => (
<Dropdown
  clearable
  fluid
  search
  closeOnChange
  selection
  options={countryOptions}
  placeholder="Select Country"
  value={val}
/>
);

回答3:

Use the "value" prop.

// index.js
const App = ({ children }) => {
  const val = "ax";
  const [state, setState] = useState([]);
  setTimeout(() => {
    setState(countryOptions);
  }, 2000);
  return (
    <Container style={{ margin: 20 }}>
      <Example countryOptions={state} value={val} />
    </Container>
  );
};

// example.js
const DropdownExampleClearableMultiple = ({ countryOptions, value }) => (
  <Dropdown
    clearable
    fluid
    search
    closeOnChange
    selection
    value={value}
    options={countryOptions}
    placeholder="Select Country"
  />
);

回答4:

You can pass value to value property of Dropdown. Use state property for selected value. Make sure that you change/update state on onchange event.

来源：https://stackoverflow.com/questions/57622068/how-to-set-value-in-dropdown-in-react-js

标签

javascript

reactjs

semantic-ui-react