Здесь в этом коде я получаю некоторое значение массива, которое является динамическим. На основе этого значения я создаю пользовательский интерфейс. Это значение может измениться, в зависимости от того, как изменится пользовательский интерфейс.
Теперь я должен загрузить все данные по нажатию кнопки на сервер, я запутался.
Например, если у нас есть 3 статических поля, я могу создать 3 состояния и, используя их, передать это значение API.
Но здесь, когда я генерирую динамический пользовательский интерфейс, как я могу принятьценность и загрузка. В моем пользовательском интерфейсе есть несколько полей ввода, которые все генерируют в ответе массива, поступающем из серверной части. Но как я могу получить все это значение при нажатии кнопки. Например, если я не знаю, как я могу создать для них государство? Как бы я сделал SetState для? Пожалуйста, помогите.
Ниже приведено значение массива на основе того, что я генерирую динамическую форму.
formFields: Array(8)
0:
key: "dateOfBirth"
label: "Date of Birth"
model: "model.dateOfBirth"
name: "dateOfBirth"
placeHolder: "DD/MM/YYYY"
position: "1"
required: "true"
type: "date"
__typename: "FormFields"
__proto__: Object
1:
key: "lastRechargedAmount"
label: "Last RCC Amt."
model: "model.lastRechargedAmount"
name: "lastRechargedAmount"
placeHolder: "Amount in Naira"
position: "2"
required: "false"
type: "text"
__typename: "FormFields"
__proto__: Object
2:
key: "stateOfOrigin"
label: "State of Origin"
model: "model.stateOfOrigin"
name: "stateOfOrigin"
placeHolder: "State of origin"
position: "3"
required: "true"
type: "parentSelect"
__typename: "FormFields"
__proto__: Object
3: {type: "childSelect", model: "model.lgaOfOrigin", label: "LGA of Origin", placeHolder: "Enter Lga of origin", key: "lgaOfOrigin", …}
4:
key: "frequentlyDialledNumbers1"
label: "Freq.Dialled No"
model: "model.frequentlyDialledNumbers"
name: "frequentlyDialledNumbers1"
placeHolder: "frequently dialled MSISDN"
position: "5"
required: "true"
type: "text"
__typename: "FormFields"
__proto__: Object
5: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers2", …}
6: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers3", …}
7: {type: "text", model: "model.frequentlyDialledNumbers", label: "Freq.Dialled No", placeHolder: "frequently dialled MSISDN", key: "frequentlyDialledNumbers4", …}
length: 8
Код ниже, который я использую для создания пользовательского интерфейса, и при нажатии кнопки я вызываю функциюvalidatUser (). При нажатии кнопки я должен принять все значения и отправить в этой функции.
class CustomerEvalidation extends Component {
constructor(props) {
super(props);
const { eValidationMasterData } = this.props;
this.state = {
selectedRow: -1,
disableBtn: true,
showSimSwapReason: false,
dateOfBirth: currentDate,
lastName: '',
lgaValue: eValidationMasterData.masterData.lga[0].code,
stateValue: eValidationMasterData.masterData.lga[0].state.name,
stateCode: eValidationMasterData.masterData.lga[0].state.code,
isModalVisible:false
};
}
componentWillUnmount() {
this.setState({
showSimSwapReason: false
});
}
lgaChanged = (key, val) => {
this.handleChangeLga({ field: "lgaValue" }, val);
};
handleChangeLga = (props, e) => {
const { lga } = this.props.eValidationMasterData.masterData;
let tempObj = this.state.lgaValue;
for (let i = 0; lga[i]; i++) {
if (lga[i].code == e) {
const stateData = lga[i].state;
this.setState({
stateValue: stateData.name,
stateCode: stateData.code
})
}
}
tempObj[props.field] = e;
this.setState({ lgaValue: e });
};
validatUser = () => {
const {dateOfBirth,lgaValue,stateCode}=this.state;
const validateUser = {
dateOfBirth: dateOfBirth,
lgaValue:lgaValue,
stateCode:stateCode
}
this.props.verifySecurityQuestions(validateUser);
}
onChangeExp = (e) => {
this.setState({
dateOfBirth: e
})
}
render() {
const { dateOfBirth, lastName, lgaValue, stateValue } = this.state;
const { isCamera, loading, error, securityQuestions, eValidationMasterData,validateUser } = this.props;
const { formFields } = securityQuestions.evalidatorType[0].SelectionList[0];
const { lga } = eValidationMasterData.masterData;
let lgaOptions = [];
lga.map(({ code: value, name: label }) => {
lgaOptions.push({ value, label });
});
return (
<View style={{minHeight: deviceHeight, color:'#fff'}}>
{loading &&
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<OverlaySpinner color="#00678F" />
</View>}
{!isCamera && (
<View style={styles.container}>
{formFields.map((document, index) => {
return (
<View style={{backgroundColor: '#fff' }}
key={index}>
{document.type === 'text' && (
<View style={{ padding: 15}} >
<View style={{ flexDirection: 'row', backgroundColor: '#fff' }}>
<SmallText textColor="grey" text={document.label} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
<Input
value={lastName}
keyboardType='default'
onChangeText={(lastName) =>
this.setState({ lastName: lastName.replace(/\s/g, '') })}
/>
</Item>
</View>
)
}
{document.type === 'date' && (
<View style={{ padding: 15}}>
<View style={{
flexDirection: 'row', backgroundColor: '#fff'
}}>
<SmallText textColor="grey" text={document.label} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
<DatePicker
minDate={minDate}
maxDate={currentDate}
currentDate={dateOfBirth}
format={format}
width={deviceWidth}
onChange={(dateOfBirth) => this.onChangeExp(dateOfBirth)}
marginLeft={0}
/>
</Item>
</View>
)}
</View>
);
}
)}
</View>
)}
<View style={{ flexDirection: 'column', padding: 15 }}>
<View style={{ flexDirection: 'column', flex:1 }}>
<SelectField options={lgaOptions} value={lgaValue}
onChange={this.lgaChanged} that={this}
label={"LGA of Origin"} />
</View>
<View style={{ flexDirection: 'column' }}>
<View style={{ flexDirection: 'row', backgroundColor: '#fff' }}>
<SmallText textColor="grey" text={"State of Origin"} />
</View>
<Item style={{ borderColor: '#00fff', borderBottomWidth: 1, marginLeft: 0 }}>
<Input
value={stateValue}
keyboardType='default'
onChangeText={(stateValue) =>
this.setState({ stateValue: stateValue.replace(/\s/g, '') })}
/>
</Item>
</View>
<View style={{ paddingBottom: 15, marginTop: 20 }}>
<PrimaryBtn label={'Validate User'} disabled={false}
onPress={() => this.validatUser()} />
</View>
</View>
</View>
);
}
}
export default CustomerEvalidation;