семантическая реакция пользовательского интерфейса Установка значения раскрывающегося списка в состояние

handleChange = (e, { value }) => this.setState({ value })

Добавить значение в раскрывающийся список

      render(
          const { value } = this.state;
        return(
         <Dropdown 
         placeholder='Select Subject'
         name="subject"
         onChange={this.handleChange}
         selection 
         options={subjects} 
         value={value}
         />)
       )

Если кто-то использует реагирующие хуки и семантический пользовательский интерфейс, я заставил его работать, не создавая для него отдельную функцию обработчика изменений.

const options = [
    { key: "1", text: "Speaker", value: "SPEAKER" },
    { key: "2", text: "Event Planner", value: "EVENT_PLANNER" }
  ];

const [values, setValues] = useState({
    firstName: "",
    userType: ""
  });

const onChange = (event, result) => {
    const { name, value } = result || event.target;
    setValues({ ...values, [name]: value });
  };

<Form.Dropdown
  placeholder="I am a.."
  name="userType"
  label="User Type"
  selection
  onChange={onChange}
  options={options}
  value={values.userType}
  />

Что меня сбивало с толку, так это «результат», который функция onChange принимает в качестве аргумента. Поскольку параметры хранятся как объекты в массиве, правильный способ доступа к их значениям — это «результат», а не «event.target».

Еще один способ использовать DropDown в React Semantic. это сработало отлично для меня.

const options = [
    { key: 'ex1', text: 'Example 1', value: 'Example 1' },
    { key: 'ex2', text: 'Example 2', value: 'Example 2' },
]

Способ установки значения

handleSelectChange=(e,{value})=>this.setState({stateValue:value})

Поставить в известность

<Form.Select fluid label='List Example' options={options}
placeholder='List Example' 
value={value} 
onChange={this.handleSelectChange} />

Вы также можете использовать Form.Field.
Подробнее информация.

constructor(props) {
   super(props);
   this.state={
      subject : ""
   }
}

handleChange = (e, result) => {
  const { name, value } = result;
  this.setState({
     [name]: value
    });
};

render() {
  const options = [
    { key: 'ex1', text: 'Example 1', value: 'Example 1' },
    { key: 'ex2', text: 'Example 2', value: 'Example 2' },
  ];

  return(
   <div> 
      <Form>
         <Form.Field 
            placeholder="Subject"
            name="subject"
            label="Subject"
            control={Dropdown}
            fluid
            selection
            onChange={this.handleChange}
            options={options}
            value={this.state.subject}
         />
      </Form>     
   </div>
  );
}