我正在为应用程序中的表单使用 Formik 和 yup 。我无法使用 Formik 来实现复选框，无法实现此solution，但无法与我一起使用。以下是到目前为止我尝试过的代码。在实施此解决方案后，当我单击复选框时，表单将变得无效，并且提交按钮不会调用handleSubmit方法。我还尝试使用React Native Elements代替UI Kitten，但结果是相同的。
const validationSchema = Yup.object().shape({
service_charge_status: Yup.boolean(),//.oneOf([true], 'Please check the agreement'),
documents_status: Yup.boolean(), //.oneOf([true], 'Please check the agreement'),
security_number: Yup.string()
.label('Security Number *')
.required('Security Number is required'),
note: Yup.string().label('Note')
})
handleSubmit = (values: any) => {
console.log('AD Values', values);
}
render() {
return (
<Formik
initialValues={{
// id: '',
service_charge_status: false,
documents_status: false,
security_number: '',
note: '',
security_personel_number: ''
}}
onSubmit={values => { this.handleSubmit(values) }}
validationSchema={validationSchema}
>
{({ handleChange,
values,
handleSubmit,
errors,
isValid,
isSubmitting,
touched,
handleBlur,
setFieldValue }
) => (<ScrollView>
<Header
noBackButton={true}
navigation={this.props.navigation}
title="Approve Request"
/>
<Layout style={{ padding: 20 }}>
<View style={{ marginVertical: 5 }}>
<Text category="p1" style={{ marginVertical: 5 }}>
Requester Type
</Text>
<View style={{ flexDirection: 'row' }}>
<RadioGroup
selectedIndex={this.state.requestTypeIndex}
onChange={(index) => this.setState({ requestTypeIndex: index })} >
<Radio
text="New Issue"
textStyle={styles.labelColor}
// checked={values.is_new_issue}
status="warning"
/>
<Radio
text="Replacement"
textStyle={styles.labelColor}
// checked={values.is_replacement}
// onChange={handleChange('is_replacement')}
status="warning"
/>
</RadioGroup>
</View>
</View>
<View style={{ marginVertical: 5 }}>
<Text category="p1" style={{ marginVertical: 5 }}>
Check List
</Text>
<Layout style={{ marginVertical: 6 }}>
<CheckBox
text="Service Charges"
textStyle={styles.labelColor}
status="warning"
checked={values.service_charge_status}
onChange={(val) => setFieldValue('service_charge_status', !values.service_charge_status)}
/>
</Layout>
<Layout style={{ marginVertical: 6 }}>
<CheckBox
text="Documents Verification"
textStyle={styles.labelColor}
status="warning"
checked={values.documents_status}
onChange={(val) => setFieldValue('documents_status', !values.documents_status)}
/>
</Layout>
</View>
<View style={{ marginVertical: 5 }}>
<Text category="p1" style={{ marginVertical: 5 }}>
Security Personel Number *
</Text>
<Input
placeholder="Enter Security personel number"
size='small'
multiline={true}
status={touched.security_personel_number ? !errors.security_personel_number ? 'success' : 'danger' : 'warning'}
caption={(touched.security_personel_number && errors.security_personel_number) ? errors.security_personel_number : ''}
value={values.security_personel_number}
onChangeText={handleChange('security_personel_number')}
/>
<Text category="p1" style={{ marginVertical: 5 }}>
Note *
</Text>
<Input
placeholder="Enter Note"
size='small'
multiline={true}
status={touched.note ? !errors.note ? 'success' : 'danger' : 'warning'}
caption={(touched.note && errors.note) ? errors.note : ''}
value={values.note}
onChangeText={handleChange('note')}
/>
</View>
{this.state.formSpinner &&
<View style={styles.centeredContentViewStyle}>
<ActivityIndicator animating size="small" color="#fbaf3a" />
</View>}
{this.state.error ?
<View style={styles.centeredContentViewStyle}>
<Text style={styles.errorMessageStyle}>{this.state.error}</Text>
</View> : null}
<Layout
style={{
justifyContent: 'flex-end',
flexDirection: 'row',
marginVertical: 10,
}}>
<Button
style={styles.cancelButton}
onPress={() => this.props.navigation.goBack()}>
Cancel
</Button>
<Button
style={styles.submitButton}
// type="submit"
// disabled={!isValid || this.state.formSpinner}
>
{isValid + ' Submit'}
</Button>
</Layout>
</Layout>
</ScrollView>)}
</Formik>
);
}
}
const styles = StyleSheet.create({
submitButton: {
borderColor: '#00c851',
backgroundColor: '#00c851',
marginStart: 5,
},
cancelButton: {
borderColor: '#ff3547',
backgroundColor: '#ff3547',
},
labelColor: {
color: '#8F9BB3',
},
centeredContentViewStyle: {
justifyContent: 'center',
alignItems: "center",
padding: 2,
marginVertical: 5
},
errorMessageStyle: {
color: 'red'
}
});
答案 0 :(得分：2)
我将Formik与Chakra UI的Checkbox一起使用，最终使用onChange事件来解决此问题，如下所示：
<Field name="terms">
{({ field }) => (
<Checkbox
id="terms"
name="terms"
onChange={(e) => setFieldValue('terms', e.target.checked)}
>
<Text fontSize="sm" textAlign="left">
I agree to the Terms and Conditions.
</Text>
</Checkbox>
)}
</Field>
我相信与UI Kitten的工作类似。
此GitHub comment对Yup验证非常有帮助。
答案 1 :(得分：0)
Formik希望接收ChangeEvent作为handleChange函数的参数。您可以使用Input来执行此操作，但不能使用Radio或CheckBox来完成操作，因为简单地说，这些组件通过处理来自TouchableOpacity的常规onPress来模拟此事件。
我的解决方案是使用钩子来处理这些更改，然后将状态与Formik中生成的对象结合起来。
答案 2 :(得分：0)
我正在使用material-ui，但我相信解决方案可以相似。如果在将formik与任何库链接时遇到问题，请尝试公开form / field api并手动设置属性。当它起作用时，请尝试删除一些由formik自动处理的属性，以避免重新创建滚轮。
这就是我实施无线电组的方式：
<Field name="fieldName" value={formik.values.fieldName}>
{({ form }) => (
{/* Fragment is used here, to make possible to add a FormHelperText under Field. */}
<React.Fragment>
{/* Remember to use same name as in the parent Field. form.handleEvent will make it work when you click on one of the options. */}
<RadioGroup name="fieldName" onChange={form.handleChange}>
<FormControlLabel value="A" control={<Radio />} label="Value A" />
<FormControlLabel value="B" control={<Radio />} label="Value B" />
<FormControlLabel value="C" control={<Radio />} label="Value C" />
</RadioGroup>
<FormHelperText error={Boolean(form.errors.fieldName) && form.touched.fieldName}>
{form.errors.fieldName}
</FormHelperText>
</React.Fragment>
)}
</Field>
答案 3 :(得分：0)
Uı 套件或元素无关紧要。您可以使用 formik 和 yup 轻松处理。