React hook не работает из обработчика событий - PullRequest
Новая
       20

React hook не работает из обработчика событий

0 голосов
/ 19 февраля 2019

React версия: 16.8.2 

const { useState } = React;

const Dropdown = ({
  options,
  onClick,
  selected,
}) => {
  const [showDropDown, setShowDropDown] = useState(false);

  function toggleDropDown() {
    setShowDropDown(v => !v);
  }

  function createOption(o) {
    return (
      <div
        key={o}
        className='drop-down__option'
        onClick={() => {
          onClick(o);
          toggleDropDown();  
          // The following isn't working either
          // setShowDropDown(false);
        }}
       >
        {o}
      </div>
    );
  }

  return (
    <div
      onClick={toggleDropDown}
      className='drop-down'
    >
      <div>{selected}</div>
        {showDropDown && (
          <div className='drop-down__list'>
            {options.map(createOption)}
          </div>
        )}
    </div>
  );
};

const App = () => {
  const [selected, setSelected] = useState(0);

  return (
    <Dropdown
      selected={selected}
      options={[0,1,2,3]}
      onClick={v=>{setSelected(v)}}
    />
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

Итак, это просто Dropdown, когда вы щелкаете контейнер, он переключает Dropdown.

Нопроблема здесь заключается в том, что после нажатия на один из параметров параметр был обновлен, но Dropdown не был закрыт.

Таким образом, кажется, toggleDropDown(); в следующем коде не имеет никакого эффекта. 

        onClick={() => {
          onClick(o);
          toggleDropDown();  
          // The following isn't working either
          // setShowDropDown(false);
        }}

Пример воспроизведения можно найти здесь: https://codepen.io/vensa-albertgao/pen/ommGZe

Что я пропустил?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Проблема в вашем коде заключается в том, что параметры click даже на dropdown распространялись вплоть до родительского элемента, где вы снова вызываете toggleDropdown onClick, и, следовательно, переключение происходило дважды, что приводило к тому, что его не было видно.Все, что вам нужно, это остановить распространение на параметры нажмите 

const { useState } = React;

const Dropdown = ({
  options,
  onClick,
  selected,
}) => {
  const [showDropDown, setShowDropDown] = useState(false);

  function toggleDropDown() {
    console.log('called');
    setShowDropDown(v => { console.log(v); return !v});
  }

  function createOption(option) {
    return (
      <div
        key={option}
        className='drop-down__option'
        onClick={e => {
          e.stopPropagation();
          onClick(option);
          toggleDropDown();  
        }}
       >
        {option}
      </div>
    );
  }

  return (
    <div
      onClick={toggleDropDown}
      className='drop-down'
    >
      <div>{selected}</div>
        {showDropDown && (
          <div className='drop-down__list'>
            {options.map(createOption)}
          </div>
        )}
    </div>
  );
};

const App = () => {
  const [selected, setSelected] = useState(0);

  return (
    <Dropdown
      selected={selected}
      options={[0,1,2,3]}
      onClick={v=>{setSelected(v)}}
    />
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

Рабочая демонстрация

0 голосов
/ 19 февраля 2019

изменить toggleDropDown функцию на 

function toggleDropDown() {
    setShowDropDown(!showDropDown);
}

раздвоенный пример

https://codepen.io/anon/pen/XOOzaZ

...