React에서 숫자만 입력하기
사용자가 금액을 입력해야 하는 전자 상거래 웹 사이트의 경우 사용자가 숫자만 입력할 수 있도록 하는 이상적인 접근 방식입니다. 이는 양식 작성 웹 사이트, 현금 응용 프로그램, 은행 응용 프로그램 등에 대해서도 마찬가지입니다.
이 기능을 웹 애플리케이션에 적용하는 방법에는 여러 가지가 있습니다. 그 중 몇 가지만 살펴보겠습니다.
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에서 증분법 사용하기
이 예에서는 사용자가 숫자를 늘리거나 줄이기 위해 입력 막대의 맨 끝에 있는 위쪽 또는 아래쪽 화살표를 사용하여 숫자만 선택할 수 있습니다. 이 방법은 사용자가 날짜를 선택하려는 웹 양식이나 온라인 투표 상황에 적합합니다.
코드 조각 - 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