防止在React中选择关闭选择输入 [英] Preventing close of select input on selection in React

问题描述

如何防止< select> 元素在选择选项后自动关闭下拉列表，即我想要保持选项下拉菜单我已经尝试调用 event.stopPropagation（）和 < select> 的 onChange 处理程序中的event.preventDefault（）工作。

此处是小提琴与基本组件。我想实现上面描述的功能。

编辑：我尝试应用 stopPropagation（）在可能的结果中）到< option> 的点击处理程序，这也不起作用。对我来说，似乎可能有一种特定于React的方式来处理这种情况。 根据这个答案，对于本地< select> 元素来说这是不可能的 - 至少不像你所期望的那样。所以我看到了一些可能性：

1. 使用无序列表或任何其他非形式创建一个假下拉菜单元素，如 Jon Uleis在上面评论中指出的答案。




2. 如果您仍然喜欢使用本地< select> 元素，那么有一个稍微冒险的方法，它涉及在 change 上设置元素的 size 属性$ c>（也可以在 blur> 中删除​​它）。

   
   
   

   下面是一个可能看起来很简单的例子如React：

4. falsedata-console =truedata-babel =true>

     class Hello扩展React.Component {构造函数（道具）{超级（道具）; this.state = {isFocused：false}; this.handleChange = this.handleChange.bind（this）; this.handleBlur = this.handleBlur.bind（this）; } handleChange（e）{this.setState（{isFocused：true}）; } handleBlur（e）{this.setState（{isFocused：false}）; } render（）{return（< select onChange = {this.handleChange} onBlur = {this.handleBlur} size = {this.state.isFocused？this.props.options.length：false}> {this.props。 options.map（（option，index）=>（< option key = {option}> {option}< / option>））}< / select>）; }} const options = ['这应该保持打开状态''，'改变'，'它也应该'collapse''，模糊。']; ReactDOM.render（< Hello options = {options} / > ;, document.getElementById（'root'））;  

   < script src =https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js>< / script>< script src =https：// cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js\"></script><div id =root>< / div>

How can I prevent a <select> element from closing it's dropdown automatically after an option has been selected, i.e. I want to keep the option dropdown open even after a selection has been made.

I've tried invoking event.stopPropagation() and event.preventDefault() in the onChange handler for the <select> but neither worked.

Here is a fiddle with the basic components. I want to implement the functionality I described above.

Edit: I tried applying the stopPropagation() (as mentioned in the possible dulicate) to the <option>'s click handler, and that didn't work either. To me, it seems like there might a React-specific way to handle this case.

解决方案

According to this answer, it’s not really possible with a native <select> element—at least not quite like you’d expect. So I see a couple of possibilities:

1. Create a "fake" dropdown menu with an unordered list or any other non-form element, as in the answer that Jon Uleis pointed out in the comment above.

2. If you’d still prefer to use the native <select> element, there’s a slightly hacky approach which involves setting the size attribute of the element on change (and optionally, removing it on blur).

   Here’s a quick example of what that might look like in React:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isFocused: false };

    this.handleChange = this.handleChange.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }

  handleChange(e) {
    this.setState({ isFocused: true });
  }

  handleBlur(e) {
    this.setState({ isFocused: false });
  }

  render() {
    return (
      <select
        onChange={this.handleChange}
        onBlur={this.handleBlur}
        size={this.state.isFocused
          ? this.props.options.length
          : false}>
        {this.props.options.map((option, index) => (
          <option key={option}>{option}</option>
        ))}
      </select>
    );
  }
}

const options = [
  'This should "stay open"',
  'on change.',
  'It should also "collapse"',
  'on blur.'
];

ReactDOM.render(
  <Hello options={options} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

这篇关于防止在React中选择关闭选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！