如何模糊语义-ui-react 中提供的输入？

Posted 2023-03-25

【中文标题】如何模糊语义-ui-react 中提供的输入？

【英文标题】：How to blur the input provided in semantic-ui-react?

【发布时间】：2018-08-04 07:20:52

【问题描述】：

鼠标点击一切正常，但我希望它与键盘一起工作

当我坐在输入组件中按下 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

模糊错误

【问题讨论】：

手动控制焦点/模糊的目的是什么？

@ladjzero 用于键盘导航

【参考方案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>