ReactJS onClick在菜单的第一个元素不工作

Question

我在reactjs中创建了一个自定义下拉列表。当我点击下拉列表中的任何元素时，我得到它的值并把它放入一个输入，它工作得很好。问题是，第一个元素没有返回任何东西，我无法得到它的值。我还开发了下拉列表，当我选择其中的任何元素时，它就会消失。但就像我说的，它在所有元素上都很好，除了第一个。

我通过setTimeOut解决了这个问题，并在50毫秒内隐藏下拉列表。但我不认为这是一个正确的解决方案。

//Select Component
class Select extends Component {
showList = (e) => {
e.target.closest('.select').classList.add('active');
}
hideList = (e) => {
setTimeout(() => {
e.target.closest('.select').classList.remove('active');
}, 100);
}
selectValue = (e) => {
let value = e.target.getElementsByTagName('span')[0].innerHTML;
this.setState({ selectValue: value })
}

render() {
return (
<input
{...this.props}
type="text"
placeholder={this.props['placeholder']}
onFocus={this.showList}
onBlur={this.hideList}
value={this.state.selectValue}
onChange={this.changeSelectValue}
required
/>
<div className="select">
<div className="select-options menu full-width">
{
this.props.list.map(element => {
return (
<MenuItem text={element} onClick={(e) => this.selectValue(e)} />
)
})
}
</div>
</div>
);
}
}

==================

class MenuItem extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<p className={"menu-item " + this.props['type'] } {...this.props}>
{this.props['icon'] ? <i className={this.props['icon']} ></i> : null}
<span>{this.props['text']}</span>
</p>
);
}
}

Answer 1

1。当您使用列表创建菜单项列表时，对每个菜单项组件使用key prop。2.而不是从目标中获取值在selectValue函数直接传递值从onClick处理程序。

selectValue = (e , element) => {
this.setState({ selectValue: element })
}
<MenuItem text={element} key={element} onClick={(e) => this.selectValue(e , element)} />

编辑:-删除onBlur处理程序并将hideList的功能放在setState之后的selectValue函数中，如果正常的setState不起作用，您可以使用setState和回调

selectValue = (e) => {
let value = e.target.getElementsByTagName('span')[0].innerHTML;
this.setState({ selectValue: value })
e.target.closest('.select').classList.remove('active');
}