React に数字のみを入力する
ユーザーが金額を入力することが期待される e コマース Web サイトの場合、ユーザーが数字のみを入力できるようにするのが理想的なアプローチです。これは、フォーム入力 Web サイト、現金アプリケーション、銀行アプリケーションなどにも当てはまります。
この機能を Web アプリケーションに適用する方法は多数あります。それらのいくつかを見てみましょう。
React でナンバーパターン法を使用する
この方法は、まったく逆のアプローチを取ります。入力タイプはテキストで、通常は文字を使用する必要がありますが、魔法はパターンを数字のみに設定することです。
プロジェクトフォルダで、index.js ファイルに移動し、次のコードを配置します。
コードスニペット-index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
financialGoal: ''
}
}
handleChange(evt) {
const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;
this.setState({ financialGoal });
}
render() {
return (
<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />
)
}
}
ReactDOM.render(<Example />, document.body);
まず、コンポーネントの初期状態を' 'に設定して入力バーを空にし、次にコンポーネントを handleChange イベントリスナーにバインドして、入力が数値のみであることを検証します。したがって、入力バーに文字を入力すると、イベントリスナーが起動して、入力内容が必要に応じて入力されているかどうかを確認します。
出力：
React で入力 type='tel'メソッドを使用する
'tel'タイプの入力方法は、通常、ユーザーが必須フィールドに電話番号を入力する必要がある場合に採用されます。ただし、このアプローチは、顧客に単なる数値を入力してもらい、特定のパラメーターを使用してパターンを追加する必要がある場合にも適用できます。
コードスニペット-index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
class Input extends React.Component {
state = {message: ''};
updateNumber = (e) => {
const val = e.target.value;
if (e.target.validity.valid) this.setState({message: e.target.value});
else if (val === '' || val === '-') this.setState({message: val});
}
render() {
return (
<input
type='tel'
value={this.state.message}
onChange={this.updateNumber}
pattern="^-?[0-9]\d*\.?\d*$"
/>
);
}
}
ReactDOM.render(<Input />, document.getElementById('main'));
updateNumber コンポーネントを onChange イベントリスナーに割り当て、文字が入力フィールドに入力されるようにします。イベントリスナーがトリガーされ、ターゲット妥当性関数を実行して、入力フィールドに入力されたものが数字のみであることを確認します。
出力：
React で増分数法を使用する
この例では、ユーザーは入力バーの端にある上矢印または下矢印を使用して数値を増減することによってのみ数値を選択できます。この方法は、ユーザーが日付を選択したい Web フォームや、オンラインポーリングの状況に最適です。
コードスニペット-index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const {Component} = React;
class Input extends Component {
onKeyPress(event) {
const keyCode = event.keyCode || event.which;
const keyValue = String.fromCharCode(keyCode);
if (/\+|-/.test(keyValue))
event.preventDefault();
}
render() {
return (
<input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} />
)
}
ReactDOM.render(<Input /> , document.body);
onKeyPress イベントハンドラーは、keyCode と一緒に使用され、ユーザーが押しているキーをチェックします。
出力：
まとめ
入力フィールド番号を作成するというアイデアは、顧客にとって非常に役立ちます。入力フィールドに他の文字を入力できるかどうかの混乱を排除します。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn