与Formik和Yup验证问题反应

Question

标题

需要用Yup验证具有选择模式中消息类型作用的每个单选按钮。 选择一个单选按钮后，我希望Yup使用.required（）进行验证，在这种情况下，单击提交btn后，它将正确处理该表单以进行Yup验证。

import React, { Component } from "react";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Row,
  Label,
  Col
} from "reactstrap";
import { connect } from "react-redux";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { sendSMS } from "../../api";
import {
  getDriversConstantMessages,
  getUsersConstantMessages
} from "./redux/actions";
import { Formik, Form, Field } from "formik";
import * as Yup from 'yup';
import { FormGroup } from "react-bootstrap";

class SendMessageDriverModalCopy extends Component {
  state = {
    modal: false,
  };

  toggleMessage = () => {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  };

  sendMessage = (values) => {
    let userID = this.props.userID;
    let data = {
      users: [userID],
      message: values.selectMessage
    };
    return sendSMS(data).then(() => this.toggleMessage());

  };


  renderSelectMessage = (errors, touched, messages) => {
    return (
      <>
        <Row>
          <Col md="8">
            <Label for="messageTopRadio" className="messageQueryModal">
              <Field
                name="selectMsgType"
                className={'messageTopRadio' + (errors.selectMsgType && touched.selectMsgType ? ' is-invalid' : '')}
                type="radio"
                defaultChecked="checked"
                id="messageTopRadio"
              />
              שליחת הודעה מהרשימה
            </Label>
          </Col>
        </Row>
        <Row>
          <Col md="8">
            <Field
              className={'form-control' + (errors.selectMessage && touched.selectMessage ? ' is-invalid' : '')}
              component="select"
              name="selectMessage"
            >
              {messages.map((msg, key) => (
                <option key={key}>{msg.post_title}</option>
              ))}
            </Field>
            {errors.selectMessage && touched.selectMessage ? <div>{errors.selectMessage}</div> : null}
          </Col>
        </Row>
      </>
    )
  }

  renderTypeFreeMsg = (errors, touched) => {
    return (
      <Row>
        <Col md="12">
          <Label for="messageBottomRadio" className="messageQueryModal">
            <Field
              name="selectMsgType"
              className={'messageBottomRadio' + (errors.selectMsgType && touched.selectMsgType ? ' is-invalid' : '')}
              type="radio"
              id="messageBottomRadio"
            />
            או כתיבת הודעה:
          </Label>
          <Field
            type="text"
            name="freeMsg"
            className={'form-control' + (errors.freeMsg && touched.freeMsg ? ' is-invalid' : '')}
          />
          {errors.freeMsg && touched.freeMsg ? <div>{errors.freeMsg}</div> : null}

        </Col>
      </Row>
    )

  }

  renderActionBtns = (isSubmitting) => {
    return (
      <Row>
        <Col md="6">
          <Button
            color="primary"
            type="submit"
            enabled={isSubmitting}
            className="deleteOrderBtn"
          >
            שלח
          </Button>
        </Col>
      </Row>
    );
  };

  render() {
    const { data, title, messagesData } = this.props;
    let messages = !messagesData ? [] : messagesData
    const SignupSchema = Yup.object().shape({
      selectMsgType: Yup.string()
        .required('נא לבחור סוג הודעה')
    });
    return (
      <>
        <div>
          <Button
            color="secondary"
            name="driver-message"
            onClick={this.toggleMessage}
            className="addBtn_modal messageBtn btn btn-secondary"
          >
            <FontAwesomeIcon icon="envelope" size="2x" />
            <span className="iconName">{title}</span>
          </Button>
        </div>
        <Modal isOpen={this.state.modal} toggle={this.toggleMessage}>
          <ModalHeader toggle={this.toggleMessage}>שליחת הודעה</ModalHeader>
          <ModalBody>
            <Row>
              <Col md="9">
                <p className="modalUserMessageContactsDisplay">{data}</p>
              </Col>
              <Col md="5" />
            </Row>
            <div>
              <Formik
                initialValues={{
                  selectMsgType: false,
                  selectMessage: "",
                  freeMsg: ""
                }}
                validationSchema={SignupSchema}
                onSubmit={values => {
                  this.sendMessage(values);
                }}
              >
                {({ errors, touched }) => (
                  <Form>
                    <FormGroup>
                      {this.renderSelectMessage(errors, touched, messages)}
                      {this.renderTypeFreeMsg(errors, touched)}
                      {errors.selectMsgType && touched.selectMsgType ? (
                        <div>{errors.selectMsgType}</div>
                      ) : null}
                    </FormGroup>
                    <ModalFooter>
                      {this.renderActionBtns(
                        this.sendMessage
                      )}

                    </ModalFooter>
                  </Form>
                )}
              </Formik>
            </div>
          </ModalBody>
        </Modal>
      </>
    );
  }
}

const mapStateToProps = state => {
  return {
    selectedDrivers: state.selectedDrivers
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getDriversMessagesData: () => dispatch(getDriversConstantMessages()),
    getUsersMessagesData: () => dispatch(getUsersConstantMessages())
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SendMessageDriverModalCopy);