[英]React hook is not working from event handler
反应版本: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
我错过了什么?
将toggleDropDown
函数更改为
function toggleDropDown() {
setShowDropDown(!showDropDown);
}
分叉了这个例子
您的代码中的问题是,甚至在dropdown
选项上的click
被传播到父级,您再次在onClick上调用toggleDropdown
,因此切换发生两次导致它不会明显发生。 您只需要点击选项上的stopPropagation即可
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'),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.