如何解决根据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 举报,一经查实,本站将立刻删除。