Офисный интерфейс Fabri c React - выпадающий список, не относящийся к выбранным.

Question

У меня есть этот код:

<Dropdown
      selectedKey={someKeyInState}
      onChange={(e,option) => {
         // check if the dropdown should be updated
        if(someCondition){
           // update selected key
        }
        else {
           // don't update selected key
        }
      }}
      options={someOptions}
/>

Я хочу заблокировать обновление выбранного ключа, если выполняется определенное условие. Но Dropdown визуально показывает вариант, на котором я щелкнул, как выбранный. Как мне предотвратить это поведение?

Answer 1

Проблема состояла в том, что мое состояние для selectedKey было undefined, это ничего не выбрано. Когда вы передаете undefined, вы, в основном, говорите Фабри c, чтобы она самостоятельно управляла состоянием selectedKey. Я исправил, передав null вместо undefined. Это сделало Dropdown полностью контролируемым.

Answer 2

Если вы используете реагировать, вам не следует поступать таким образом. Используйте глобальное состояние optionState и попытайтесь использовать условные проверки, в каком состоянии должно быть показано использование метода onChange. Для того, чтобы сделать это. Сначала извлеките свою условную проверку в отдельную функцию.

myFunction = () => {
   // do conditional check and setState for optionState
}
--------------------------
onChange={myFunction}

Затем, когда вы выберете выдать ключ и значение из состояния параметра и обновите его до selectedState, теперь автоматически отреагируют обновлением состояния и UI