[再構築]price入力値format機能
25038 ワード
1.1000単位カンマ
SeriesFormの価格入力値を1000単位にフォーマットする機能を実現
1000単位で、後ろから3つの数字を数えて、撮ります
onChangeのたびにinput値が取得され、条件に従って操作され、戻ります.
// SeriesForm.jsx
export const formatPrice = input => {
const formatedValue = input
.split('')
.reverse()
.map((str, index) => (index > 0 && index % 3 === 0 ? `${str},` : str))
.reverse()
.join('');
return formatedValue;
};
// SeriesForm.jsx
<PayInput
width="50%"
type="text"
value={formatPrice(values.price)}
name="price"
onChange={handleChange}
min={0}
disabled={edit}
/>
const handleChange = e => {
const { name, value } = e.target;
if (name === 'price') {
const filteredValue = value.replace(/[^0-9]/g, '').replace(/(^0+)/g, '');
setValues({ ...values, [name]: filteredValue });
return;
}
setValues({ ...values, [name]: value });
};
2.ハングル形式で書式設定
実装試行1
const changeNumberToText = value => {
switch (value) {
case '1':
return '일';
case '2':
return '이';
case '3':
return '삼';
case '4':
return '사';
case '5':
return '오';
case '6':
return '육';
case '7':
return '칠';
case '8':
return '팔';
case '9':
return '구';
default:
return '';
}
};
export const formatPriceToText = input => {
const formatedValue = input
.split('')
.reverse()
.map((str, index) => {
const formattedValue = changeNumberToText(str);
if (str === '0') {
return '';
}
switch (index % 4) {
case 1:
return `${formattedValue}십`;
case 2:
return `${formattedValue}백`;
case 3:
return `${formattedValue}천`;
case 0:
return index === 0 ? formattedValue : `${formattedValue}만`;
default:
return formattedValue;
}
})
.reverse()
.join('');
return formatedValue;
};
に質問
何千何万
解決策
const addNumberUnit = (str, index) => {
const formattedValue = changeNumberToText(str);
if (str === '0') {
return '';
}
switch (index % 4) {
case 1:
return `${formattedValue}십`;
case 2:
return `${formattedValue}백`;
case 3:
return `${formattedValue}천`;
default:
return formattedValue;
}
};
export const formatPriceToText = value => {
const reversedValueArr = value.split('').reverse();
const thousandUnitValue = reversedValueArr
.slice(0, 4)
.map((str, index) => addNumberUnit(str, index))
.reverse()
.join('');
const tenThousandUnitValue =
value.length <= 4
? ''
: reversedValueArr
.slice(4)
.map((str, index) => addNumberUnit(str, index))
.reverse()
.join('')
.concat('만');
return tenThousandUnitValue + thousandUnitValue;
};
Reference
この問題について([再構築]price入力値format機能), 我々は、より多くの情報をここで見つけました https://velog.io/@yooon26/price-input값-formatテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol