在React

Question

所以你会在下面看到我有两个组件，一个AutocompleteUsers卡下拉列表和一个输入字段。当用户点击AutocompleteUsers卡内部时，会触发chooseUserInAutocomplete，这会更改状态。到目前为止一切都很好。

当用户在输入字段（onBlur）外部单击时，我隐藏了AutocompleteUsers卡（toggleAutocomplete）。问题是，当我点击AutocompleteUsers卡内部时，它甚至在触发chooseUserInAutocomplete之前触发了onBlur。

解决这个问题的一种方法是使用setTimeout，但我并不喜欢这种方法，因为它感觉很挑剔。什么是最好的解决方案？

toggleAutocomplete() {
    this.setState({ autocompleteIsVisible: !this.state.autocompleteIsVisible });
}

chooseUserInAutocomplete = (username: string) => {
    this.setState({ guessAuthor: username });
}

<AutocompleteUsers 
    visible = { this.state.autocompleteIsVisible }
    searchString = { this.state.guessAuthor }
    chooseUser = { this.chooseUserInAutocomplete }
/>
<input 
    type="text" 
    ref={ e => { if (e) this.guess = e } }
    name="guess"
    onChange={ (e) => this.setState({ guessAuthor: e.target.value})}
    onFocus={ () => this.toggleAutocomplete() }
    onBlur={ () => this.toggleAutocomplete() }
    value={ this.state.guessAuthor }
/>