Question

我需要验证Formik的react Rating组件以使其成为必需组件，默认情况下未选择星星。所以我的组件中有代码：

validateRating(value) {

    let error;
    if (!value || value === 0) {
        error = 'Required';
    }
    return error;
}  

render() {

    const ModelSchema = Yup.object().shape({
        rating: Yup.number()
            .required('Please rate this product.'),
       });

    return (
        <div>
            <Formik ...


<Field name="rating" id="rating" type="number" validate={this.validateRating}>
    {({ field: { value }, form: { setFieldValue } }) => (
    <div>
        <Rating
            placeholderRating={3}
            emptySymbol={<FontAwesomeIcon icon={farStar} size="lg" style={{color:"#aaa"}} />}
            fullSymbol={<FontAwesomeIcon icon={fasStar} size="lg" style={{color:"#ffd200"}} />}
            placeholderSymbol={<FontAwesomeIcon icon={fasStar} size="lg" style={{color:"#aaa"}} />}
            onChange={this.ratingChange} initialRating={this.state.Rating}
        />                                                                        

    </div>
    )}
</Field>
<ErrorMessage name="rating" component="small" className="form-text text-danger" />

它进入validateRating函数，但具有未定义的值。感谢任何我做错的帮助。谢谢！

Answer 1

我需要在initialValues中设置初始值

<Formik
    initialValues={{
        rating: 0
    }}

，并且有效。希望它可以帮助某人。谢谢。

Formik验证反应评分组件

1 个答案: