javascript - 如何模糊 semantic-ui-react 中提供的输入？

Question

With mouse click everything works, but I want it to work with keyboard

当我坐在输入组件中按下 downKey 时，我希望输入不聚焦/模糊。

这是我的输入组件

import { Input } from 'semantic-ui-react';

<Input 
  focus={this.state.inputFocus} 
  ref='search'
  placeholder='Search...' />

在进入输入时，使用按键，这段代码有助于聚焦输入

this.refs.search.focus();
this.setState({ inputFocus: true });

但是从输入框出来时，闪烁的按键指示器并没有被移除，框仍然看起来是聚焦的，

尝试过的代码 不起作用

this.refs.search.blur(); // generates error
this.setState({ inputFocus: false }); //changes state var but ui isn't changed

模糊错误

Answer 1

如果您确实需要手动控制模糊/聚焦，那么您可以监听onKeyDown 事件并检查向下箭头代码。

当满足条件时，您可以在 event.target 上触发 .blur() 事件或根据需要设置状态:

  shouldBlur = (e) => {
    if (e.keyCode === 40) {
      e.target.blur();
      // or set the state as you wish
    }
  }

然后像这样使用这个处理程序:

<Input value={value} onKeyDown={this.shouldBlur} onChange={this.handleChange} />

这是一个运行示例:

const { Input, Ref, Button } = semanticUIReact;

class App extends React.Component {
  state = { value: 'initial value' }
  handleChange = (e, { value }) => this.setState(prev => ({ value }));
  focus = () => {
    this.inputRef.focus();
  }
  shouldBlur = (e) => {

    if (e.keyCode === 40) {
      e.target.blur();
      // or set the state as you wish
    }
  }
  render() {
    const { value } = this.state;
    return (
      <div >
      <div>click the down arrow for blur</div>
      <hr/>
        <Input
          value={value}
          onKeyDown={this.shouldBlur}
          onChange={this.handleChange}
          ref={ref => this.inputRef = ref}
        /> 
        <Button onClick={this.focus}>Focus</Button>
      </div>
    );
  }
}

ReactDOM.render(<App />, 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>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-react@0.78.2/dist/umd/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<div id="root"></div>