如何解决我正在使用 formik 和是的，但它不起作用它继续提交，即使该字段无效
我正在使用 formik 和 Yup 来验证我的表单字段，但它不起作用。我不知道我做错了什么。
- 我的应用程序正在复制字段；
- 当我写一些无效的东西时它会继续提交：例如，在姓名字段上输入数字；
- 当我只在顶部字段中输入时，“保存”按钮未启用。保存按钮仅在我输入以下字段时启用；
- 我的“取消”按钮不再起作用。
请帮帮我。 谢谢。
我上传了我的应用程序的打印屏幕。
import React,{ Component } from 'react'
import Main from '../template/Main'
import axios from 'axios'
import { Helmet } from 'react-helmet'
import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/src/react-confirm-alert.css'
import { BASE_URL} from './Url.json'
import { Formik,ErrorMessage,Form,Field } from 'formik'
import * as Yup from 'yup'
const initialState = {
member: { avatar: '',name: '',email: '',project: '',devices: '',mainstack: '' },list: [],}
export default class MemberCrud extends Component {
constructor(props) {
super(props)
this.state = {...initialState}
//this.validateField = this.validateField.bind(this)
}
componentwillMount() {
axios(BASE_URL).then(resp => {
this.setState({ list: resp.data })
})
}
clear() {
this.setState({ member: initialState.member})
}
save() {
const member = this.state.member
const method = member.id ? 'put' : 'post'
const url = member.id ? `${BASE_URL}/${member.id}` : BASE_URL
axios[method](url,member)
.then(resp => {
const list = this.getUpdatedList(resp.data)
this.setState({ member: initialState.member,list})
})
}
getUpdatedList (member) {
const list = this.state.list.filter(u => u.id !== member.id)
list.unshift(member)
return list
}
updateField (event,field) {
const member = this.state.member;
member[field] = event.target.value
this.setState({ member })
}
renderInput(title,value,onChange,/*validateField,*/ placeholder,formik= {} ) {
return (
<div className="col-12 col-md-4">
<div className="form-groud">
<label>{title}</label>
<input type="text" className="form-control"
name={title}
value={value}
onChange={e => onChange(e)}
//onBlur={validateField}
placeholder={placeholder} />
</div>
<div className="form-row">
<Field
type={placeholder}
name={placeholder}
id={placeholder}
// className={formik.errors[placeholder] && formik.touched[placeholder] ? "input-error" : null}
/>
<ErrorMessage name={placeholder} component="span" className="error" />
</div>
</div>
)
}
/*validateField (member) {
const errors = {...this.member};
if(member.name == null) {
errors.name = {
message: 'You need to provide a name'
}
}
if(!member.email) {
errors.email = {
message: 'You need to provide an email address'
}
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(member.email)) {
errors.email = {
message: 'Invalid email address'
}
}
return errors;
}*/
renderForm() {
const formSchema = Yup.object().shape({
name: Yup.string().required('required'),email: Yup.string().required('required'),project: Yup.string().required('required'),devices: Yup.string().required('required'),mainstack: Yup.string().required('required'),})
const initialState = {
member: { avatar: '',}
return (
<Formik
initialValues={initialState.member}
validationSchema={formSchema}
onSubmit={(values) => {
console.log(values)
}}
>
{(formik) => {
return (
<Form onSubmit={formik.handleSubmit}>
<div className="row" updateField={this.updateField}>
{this.renderInput("Avatar",this.state.member.avatar,e => this.updateField(e,"avatar"),/*this.validateField,*/ "avatar",formik)}
{this.renderInput("Name",this.state.member.name,"name"),*/ "name",formik )}
{this.renderInput("Email",this.state.member.email,"email"),*/ "email",formik )}
{this.renderInput("Project",this.state.member.project,"project"),*/ "project",formik )}
{this.renderInput("Devices",this.state.member.devices,"devices"),*/ "devices" )}
{this.renderInput("MainStack",this.state.member.mainstack,"mainstack"),*/"mainstack",formik )}
</div>
<hr />
<div className="row">
<div className="col-12 d-flex justify-content-end">
<button
type="submit"
className={!(formik.dirty && formik.isValid) ? "disabled-btn" : "btn btn-primary"}
disabled={!(formik.dirty && formik.isValid)}
onClick={e => this.save(e)}>
Save
</button>
<button
type="button"
className="btn btn-secondary ml-2"
onClick={e => this.clear(e)}
/*disabled={!(formik.dirty && formik.isValid)}*/>
Cancel
</button>
</div>
</div>
</Form>
);
}}
</Formik>
)
}
load(member) {
this.setState({ member })
}
remove(member) {
axios.delete(`${BASE_URL}/${member.id}`).then(resp => {
const list = this.state.list.filter(u => u !== member)
this.setState({ list })
})
}
confirmRemove(member) {
confirmAlert({
message: 'Are you sure ?',buttons: [
{
label: 'Yes',onClick: () => this.remove(member)
},{
label: 'No',}
]
})
}
renderTable() {
return (
<table className="table">
<thead>
<tr>
<th>Profile Pictute</th>
<th>Name</th>
<th>Email</th>
<th>Project</th>
<th>Devices</th>
<th>Main Stack</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.renderRows()}
</tbody>
</table>
)
}
renderRows(){
return this.state.list.map(member => {
return (
<tr key={member.id}>
<td><div className="avatar">
<img src={member.avatar} alt={member.name} />
</div>
</td>
<td>{member.name}</td>
<td>{member.email}</td>
<td>{member.project}</td>
<td>{member.devices}</td>
<td>{member.mainstack}</td>
<td>
<button className="btn btn-warning"
onClick={() => this.load(member)}>
<i className="fa fa-pencil"></i>
</button>
<button className="btn btn-danger ml-2"
onClick={()=>{this.confirmRemove(member)}}>
<i className="fa fa-trash"></i>
</button>
</td>
</tr>
)
})
}
render () {
return (
<Main>
{this.renderForm()}
{this.renderTable()}
<Helmet>
<title>Add Member</title>
</Helmet>
</Main>
)
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。