根据Formik / Yup验证更改按钮的颜色

问题描述

用户必须在其中输入文字。如果文本是所需的文本，则应更改按钮的颜色，以便用户知道文本是正确的文本。

到目前为止，我已经完成了文本的验证，如果文本不是所需的文本，但我不知道如何将其连接到按钮的样式，则会显示一条错误消息。

这是我的代码：

import React from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import * as Yup from 'yup';
import { Formik,Form,Field } from 'formik';
import { Button,Modal,Input } from 'semantic-ui-react';
import { Creators } from '../../../actions';
import './FridgeForm.scss';

class CreateFridgeForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false,redirectCreate: false,};
  }

  componentDidMount() {
    const { edit,getFridge,fridge,getFridges } = this.props;
    if (edit) {
      getFridge(fridge._id);
      getFridges();
    }
  }

  onopen = () => {
    this.setState({ open: true });
  };

  closeModal = () => {
    this.setState({ open: false });
  };

  handleDelete = values => {
    const { deleteFridge,getFridges } = this.props;

    deleteFridge(fridge._id);

    this.setState({ open: false });
    this.setState({ redirectCreate: true });
    getFridges();
  };

  render() {
    const { trigger } = this.props;
    const title = 'Do you want to delete a fridge?';

    const { open,redirectCreate } = this.state;
    if (redirectCreate) {
      return <Redirect to="/fridges" />;
    }

    const initialValues = {
      deleteText: '',};
    const wrongTextMessage =
      'You must write DELETE in order to delete the fridge';
    const requiredErrorMessage = 'This field is required';
    const deleteTextValidation = /DELETE\b/g;
    const validationSchema = Yup.object({
      deleteText: Yup.string()
        .matches(deleteTextValidation,wrongTextMessage)
        .required(requiredErrorMessage),});
    return (
      <Modal
        open={open}
        trigger={trigger}
        onopen={this.onopen}
        onClose={this.closeModal}
        size="small">
        <Modal.Header >{title}</Modal.Header>
        <Modal.Content >
          <Modal.Description >
            Are you sure you want to delete?
          </Modal.Description>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => this.handleDelete(values)}>
            {({ values,errors,touched,setFieldValue }) => (
              <Form>
                <Field
                  className="add-fridge-input"
                  name="deleteText"
                  as={Input}
                  placeholder="Write DELETE"
                />
                <div className="add-fridge-error">
                  {touched.deleteText && errors.deleteText
                    ? errors.deleteText
                    : null}
                </div>
               
                  <Button className="delete-modal-button" type="submit"> // here is the button
                    Confirm
                  </Button>
           
              </Form>
            )}
          </Formik>
        </Modal.Content>
      </Modal>
    );
  }
}

const mapStatetoProps = state => ({
  fridges: state.fridges.fridges,fridge: state.fridges.selectedFridge,});

const mapdispatchToProps = {
  getFridges: Creators.getFridgesRequest,getFridge: Creators.getFridgeRequest,deleteFridge: Creators.deleteFridgeRequest,};

export default connect(mapStatetoProps,mapdispatchToProps)(CreateFridgeForm);

如果validationSchema验证文本正确，是否可以通知按钮？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）