0

我使用最新版本（1.0.0-rc.5）从react-select 库中实现了 Select 组件。

我可以单击 Select 元素打开列表。我选择一个值，它会关闭列表并显示我选择的值。但是，当我再次单击该元素以显示选项列表时，什么也没有发生。它只会在我点击离开后打开列表（可能在模糊事件之后）。

我尝试通过使用 autoBlur={true} 属性来解决这个问题，但我无法在 IE 11 中切换到页面上的下一个元素。

我确实注意到演示页面上没有发生这种情况，它仍然使用版本 0.9.1。

有谁知道为什么会这样？

编辑

这是我班的一个样本

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>
        );
    }
}

这是实现类的页面

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;
4

1 回答 1

0

我想到了。选择选项时，我的输入将最小的宽度设置为95％。

这会导致 event.target.tagName 在尝试单击下拉列表时为 INPUT，这会导致代码在触发任何焦点事件之前返回。

于 2017-07-19T18:53:32.873 回答