マウスクリックですべてが機能しますが、キーボードで機能させたい
入力コンポーネントに座っているときに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
ぼかしエラー
本当にぼかし/フォーカスを手動で制御する必要がある場合は、onKeyDown
イベントをリッスンして、下向きのコードを確認できます。
条件が満たされると、.blur()
イベントをevent.target
または、必要に応じて状態を設定します。
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/[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>