我试着创建一个文本来覆盖文本框,但我没有继续,因为这会使事情更加复杂。
我回滚代码。
###################################################################################### 以下是我的回滚代码:
const StepFour = (props) => {
const [number, setNumber] = useState('')
const [expiry, setExpiry] = useState('')
const [cvc, setCvc] = useState('')
const [focus, setFocus] = useState('')
const [month, setMonth] = useState('')
const [year, setYear] = useState('')
const [cardNumError, setCardNumError] = useState(false)
const dispatch = useDispatch()
const cardList = ['4571736000000075']
const handleCardNumError = () => {
if (!cardList.includes(number) ) {
setCardNumError(true)
} else {
setCardNumError(false)
}
}
const handleCardNumError2 = () => {
if (!cardList.includes(number) && number.length === 19 ) {
setCardNumError(true)
} else {
setCardNumError(false)
}
}
useEffect(() => {
setExpiry(month + '/' + year)
}, [month, year])
const classes = useStyles()
return (
<div className={classes.mainContainer}>
<div>
<Cards
number={number}
expiry={expiry}
cvc={cvc}
focused={focus}/>
</div>
<div className={classes.formInputContatiner}>
<div>
<Typography
variant="subtitle1"
style={{
color: "black",
textAlign: "left",
marginBottom: "5px"
}}>
Card Number
</Typography>
<div className={classes.cardNumber}>
<div className={classes.grid}>
<div className={classes.cardNumContainer}>
<input
className={classes.inputStyle}
type='tel'
name='number'
maxLength='16'
placeholder='1234 1234 1234 1234'
value={number}
style={{
color: "black",
border: "1px solid",
borderColor: cardNumError ? 'red' : '#ccc',
display: "inline-block"
}}
onChange={e => {
let val = e.target.value
const re = /^[0-9\b]+$/
if (val === '' || re.test(val)) {
setNumber(val)
dispatch(getCN(val))
}
handleCardNumError2()
}}
onFocus={e => {
setFocus(e.target.name)
}}
onBlur={() => {
handleCardNumError()
}}/>
</div>
</div>
{cardNumError === true ? <Typography
variant="subtitle1"
style={{
color: "red",
}}>
Your card number is invalid.
</Typography> : null}
</div>
</div>
<div>
<Typography
variant="subtitle1"
style={{
color: "black",
textAlign: "left",
marginBottom: "5px"
}}>
Month and Year
</Typography>
<div className={classes.dateAndCVC}>
<input
className={classes.inputStyle2}
type="text"
name='month'
placeholder='MM'
value={month}
onChange={e => {
setMonth(e.target.value)
dispatch(getCDM(e.target.value))
}}
onFocus={e => setFocus(e.target.name)}/>
<input
className={classes.inputStyle2}
type="text"
name='year'
placeholder='YY'
value={year}
onChange={e => {
setYear(e.target.value)
dispatch(getCDY(e.target.value))
}}
onFocus={e => setFocus(e.target.name)}/>
</div>
</div>
<div>
<Typography
variant="subtitle1"
style={{
color: "black",
textAlign: "left",
marginBottom: "5px"
}}>
CVC
</Typography>
<input
className={classes.inputStyle2}
type="tel"
name='cvc'
placeholder='CVC'
value={cvc}
onChange={e => {
setCvc(e.target.value)
dispatch(getCCVC(e.target.value))
}}
onFocus={e => setFocus(e.target.name)}/>
</div>
</div>
</div>
)
}
导出默认StepFour
下面是输出:
1条答案
按热度按时间1tuwyuhd1#
这是我的解决方案。我通过检查输入是否已经有4个字符的长度,然后在其中添加
space
来处理卡片何时显示。重要的部分是当你输入每个字符时,你必须在再次添加
space
之前删除所有旧的space
,否则它会用很多奇怪的space
填充输入。这是我的代码。您可以在这里看到它的操作