在进行后突变之前反应如何验证表单

Question

我有一个反应表单可以将一些数据添加到我的数据库中。我正在使用 Prisma 和 Graphql。我将突变查询嵌套到一个按钮中。因此，当单击按钮时，表单已提交，但我想知道如何在提交之前首先验证是否已填写所有字段？

代码：


    render() {
        const {id, firstname, lastname} = this.state
        const UPDATE_MUTATION = gql`
   mutation UpdateMutation($id:ID!, $firstname: String!, $lastname: String!) {
   updateClient(id:$id, firstname: $firstname, lastname: $lastname) {
     id
     firstname
     lastname
   }
 }
     `
        return (
            <React.Fragment>
                {
                            <Modal
                                {...this.props}
                                size="lg"
                                aria-labelledby="contained-modal-create-service"
                                centered
                            >
                                <Modal.Header closeButton >
                                    <Modal.Title id="contained-modal-title-vcenter">Update service</Modal.Title>
                                </Modal.Header>
                                <Modal.Body>
                                <div className="flex flex-column mt3 client-row ">
                                <section className="form-group firstname">
                                    <label>Firstname:</label>
                                    <input
                                        className="form-control "
                                        value={firstname}
                                        onChange={e => this.setState({ firstname: e.target.value })}
                                        type="text"
                                        placeholder="A name for the service"
                                    />
                                </section>
                                <section className="form-group lastname">
                                    <label>Lastname:</label>
                                    <input
                                        className="form-control "
                                        value={lastname}
                                        onChange={e => this.setState({ lastname: e.target.value })}
                                        type="text"
                                        placeholder="The service cost"
                                    />
                                </section>

                            </div>
                                </Modal.Body>
                                <Modal.Footer>
                                    <Mutation mutation={UPDATE_MUTATION}
                                        variables={{id, firstname, lastname}}>
                                        {/* onCompleted={() => this.props.history.push('/')} */}

                                        {updateMutation =>

                                            <button onClick={() => {updateMutation(); this.props.onHide() ; window.location.reload(false)} } className="btn submit">Update</button>

                                        }
                                    </Mutation>
                                </Modal.Footer>
                            </Modal>

                }
            </React.Fragment>

Answer 1

这是一个简单的例子：

const form = ()=>{

const [form,setForm] = useState({userName:"",password:""})
const [error,setError] = useState(false)

const validateForm = ()=>{
if(form.userName.length===0 && form.password.length===0)
return false

return true
}

const handleSubmit = ()=>{
if(validateForm()){
// do your stuff
}
else{
setError(true)
}
}
const handleChange =(e)=>{
if(error) setError(false);
const {target} = e
setForm(current=>({...current,[target.name]:target.value}))
}

return (
<form onSubmit={handleSubmit}>
<input type="text" name="userName" value={form.userName} onChange={handleChange}/>
<input type="password" name="password" value={form.password} onChange={handleChange}/>
<button type="submit">login</button>
{error && <p> UserName and password are required!<p>
</form>
)
}

就是这样，但是您可以通过使用像 formik with yup validation library

这样的 React 表单库来节省大量工作

在进行后突变之前反应如何验证表单

React how to validate form before making postmutation

javascript

validation

reactjs

graphql

prisma