React-Select 1.0.0-rc.5 - 选择一个选项后单击内部时 Select 不会打开
React-Select 1.0.0-rc.5 - Select doesn't open when clicking inside after choosing an option
我使用最新版本 (1.0.0-rc.5) 从 react-select library 实现了 Select 组件。
我可以单击 Select 元素来打开列表。我选择一个值,这会关闭列表并显示我选择的值。但是,当我再次单击该元素以显示选项列表时,什么也没有发生。它只会在我点击离开后打开列表(可能是在模糊事件之后)。
我尝试使用 autoBlur={true} 属性解决这个问题,但我无法在 IE 11 中切换到页面上的下一个元素。
我确实注意到演示页面上没有发生这种情况,它仍然使用版本 0.9.1。
有人知道为什么会这样吗?
编辑
这是我的样本 class
export class TestSelect extends React.Component {
constructor(props) {
super(props);
}
updateValue = (selectedItem) => {
this.setState({ selectValue: selectedItem });
if (this.props.onChange) {
this.props.onChange(selectedItem);
}
}
render() {
return (
<div id={this.props.id} className="form-styling">
<Label text="React Select" />
<br/><br />
<Select
options={this.props.options}
className="select-class"
clearable={false}
onChange={this.updateValue}
/>
</div>
);
}
}
这是实现 class
的页面
const TestPage = () =>{
return(
<TestSelect
id="select-id"
options={testSelectOptions}
/>);
}
export const testSelectOptions = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
];
export default TestPage;
我明白了。选择一个选项后,我的输入将最小宽度设置为 95%。
这会导致 event.target.tagName 在尝试在下拉列表中单击时被输入,这会导致代码在任何焦点事件被触发之前 return。
我使用最新版本 (1.0.0-rc.5) 从 react-select library 实现了 Select 组件。
我可以单击 Select 元素来打开列表。我选择一个值,这会关闭列表并显示我选择的值。但是,当我再次单击该元素以显示选项列表时,什么也没有发生。它只会在我点击离开后打开列表(可能是在模糊事件之后)。
我尝试使用 autoBlur={true} 属性解决这个问题,但我无法在 IE 11 中切换到页面上的下一个元素。
我确实注意到演示页面上没有发生这种情况,它仍然使用版本 0.9.1。
有人知道为什么会这样吗?
编辑
这是我的样本 class
export class TestSelect extends React.Component {
constructor(props) {
super(props);
}
updateValue = (selectedItem) => {
this.setState({ selectValue: selectedItem });
if (this.props.onChange) {
this.props.onChange(selectedItem);
}
}
render() {
return (
<div id={this.props.id} className="form-styling">
<Label text="React Select" />
<br/><br />
<Select
options={this.props.options}
className="select-class"
clearable={false}
onChange={this.updateValue}
/>
</div>
);
}
}
这是实现 class
的页面const TestPage = () =>{
return(
<TestSelect
id="select-id"
options={testSelectOptions}
/>);
}
export const testSelectOptions = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
];
export default TestPage;
我明白了。选择一个选项后,我的输入将最小宽度设置为 95%。
这会导致 event.target.tagName 在尝试在下拉列表中单击时被输入,这会导致代码在任何焦点事件被触发之前 return。