React App Clickhandler验证问题
React App Clickhandler验证问题
提问于 2019-05-26 07:00:32
我正在尝试从json服务器获取数据，并使用输入字段中输入的值进行验证。如果获取的数据和输入的数据相同，则需要在字段和描述文本之间添加div。我也已经创建了那个组件，我想它没问题。
我已经设置了onChangeHandler，但是OnClickHandler没有完成输入和相关json字段之间的验证。也许我需要使用循环进行验证？
import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import styled from 'styled-components';
import ApplyButton from '../ApplyButton/ApplyButton';
import axios from 'axios';
import IsApplied from '../IsApplied/IsApplied';
const NumberContainer = styled.div`
margin-top: 10px;
`;
export default class NumberBox extends Component {
constructor(props) {
super(props);
this.state = {
giftcards: [],
first: '',
second: '',
isSeen: false
};
this.onClickHandler = this.onClickHandler.bind(this);
this.onHandleChange = this.onHandleChange.bind(this);
}
onHandleChange (property) {
return e => {
this.setState({
[property]: e.target.value
});
};
}
async componentDidMount() {
const response = await axios.get('http://localhost:3001/giftcards')
const giftcards = response.data
this.setState({giftcards: giftcards})
}
onClickHandler() {
if (this.state.first === this.state.giftcards.cardnumber &&
this.state.second === this.state.giftcards.control) {
return alert("correct") & this.setState({isSeen:true})
} else if (this.state.first.length === 0 &&
this.state.second.length === 0) {
return alert("error")
} else {
return alert("enter correct number") & console.log(this.state.giftcards)
}
}
render() {
let resultsbox;
if (this.state.isSeen) {
resultsbox = <IsApplied cardno={this.state.first}/>;
} else {
resultsbox = null;
}
return (
<NumberContainer>
{resultsbox}
<TextField
style={{ margin: 8, width: 430 }}
margin="normal"
variant="outlined"
type="search"
label="Gift Card Number"
value={this.state.first}
name="cardNomber"
onChange={this.onHandleChange('first')}
/>
<TextField
style={{ margin: 8, width: 200}}
margin="normal"
variant="outlined"
type="search"
label="Control Code"
value={this.state.second}
name="controlCoder"
onChange={this.onHandleChange('second')}
/>
<ApplyButton handle={this.onClickHandler}/>
</NumberContainer>
)
}
}{
"giftcards": [
{
"cardnumber": "5078282848878291861",
"control": "175"
},
{
"cardnumber": "6435047555924007105",
"control": "201"
}
]
}在检查console.log时，我对this.state.giftcards.cardnumber和this.state.giftcards.control的定义不明确
Stack Overflow用户
回答已采纳
发布于 2019-05-26 07:55:31
this.setState({giftcards: giftcards}).
您正在将giftcards状态值设置为等于一个对象。该JSON对象有一个由giftcard组成的键。因此，您在onClickHandler中的条件至少必须是这样的：
if(this.state.first === this.state.giftcards.giftcards[index]){
....
}由于key giftcard的值有一个数组，因此您还必须决定希望它检查数组中的哪一项，如this.state.giftcards.giftcards.cardnumber...
但是，这听起来更像是您只想过滤一些数据，以确定用户是否输入了与卡片完全相同的信息。
我们可以使用array.filter()返回任何与您的用户输入匹配的礼品卡。如果有，则将isSeen设置为true。试着为onClickHandler()做这样的事情
onClickHandler(){
const { giftcards, first, second } = this.state
const matchingGiftCards = giftcards.filter((card) => {
return card.cardnumber == first && card.control == second
})
//if there are any matching giftcards we will set isSeen to tru
if(matchingGiftCards.length > 0){
this.setState({isSeen:true})
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56309388
复制相关文章
相似问题
腾讯云开发者
