javascript 如何模糊semantic-ui-react中提供的输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48961342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to blur the input provided in semantic-ui-react?
提问by Sabbiu Shah
With mouse click everything works, but I want it to work with keyboard
用鼠标点击一切正常，但我希望它与键盘一起工作
I want input to be unfocused/blurred when I press downKey while sitting in the input component.
当我坐在输入组件中按下 downKey 时，我希望输入不聚焦/模糊。
This is my input component
这是我的输入组件
import { Input } from 'semantic-ui-react';
<Input
focus={this.state.inputFocus}
ref='search'
placeholder='Search...' />
while going into the input, using keypress, this code helps to focus the input
在进入输入时，使用按键，此代码有助于聚焦输入
this.refs.search.focus();
this.setState({ inputFocus: true });
but while going out from the input box, the blinking key indicator isn't removed and the box still appears to be focused,
但是当从输入框出来时，闪烁的按键指示灯没有被移除，框仍然看起来是聚焦的，
Tried CodeDoesn't Work
尝试过的代码不起作用
this.refs.search.blur(); // generates error
this.setState({ inputFocus: false }); //changes state var but ui isn't changed
Blur Error
模糊错误
回答by Sagiv b.g
If you reallyneed to manually control the blur / focus, then you can listen to the onKeyDownevent and check for the arrow-down code.
如果你真的需要手动控制模糊/焦点，那么你可以监听onKeyDown事件并检查向下箭头代码。
When condition is met, you can fire the .blur()event on the event.targetor set the state as you like:
当条件满足时，您可以根据需要触发.blur()事件event.target或设置状态：
shouldBlur = (e) => {
if (e.keyCode === 40) {
e.target.blur();
// or set the state as you wish
}
}
And use this handler like this:
并像这样使用这个处理程序：
<Input value={value} onKeyDown={this.shouldBlur} onChange={this.handleChange} />
Here is a running example:
这是一个运行示例：
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/[email protected]/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>