Formik validate react 评级组件

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 validate react 评级组件

Formik validate react Rating component

javascript

reactjs

yup

formik