reactjs - 当我更改 Formik React js 中自动清除的另一个表单元素自动完成值时

Question

表单有两个元素。

当我从emal元素中选择自动完成值，然后尝试向titl字段输入文本值时，自动完成值会自动更改为空。

我应该怎么做才能解决这个问题？

我试图改变formik initialValues使用状态，但它不起作用。

抱歉语言问题。提前致谢！

class TicketNew extends React.Component{
    state = {
        clearForm:false,
        spinner:false,
        closeForm:false,
        emailsugges:[],
    }
    
    loadAlldata() {
        this.setState({
            spinner:false,
    })

     axios.post(baseUrl+'/api/load_company_list')
        .then(res => {
          const comanyList = res.data;
         const emls = comanyList.emls.map(function(item, i){
            return {
                value:item.tci, title:item.tcc
                }
         })
          this.setState({
              emailsugges:emls
            })
        })
        this.setState({
            spinner:false,
        })
    };

    componentDidMount(){
        this.loadAlldata();
    };
    
    render(){
        return(
            <React.Fragment>
              <Formik
                initialValues={{ emal: "", titl: "" }}
                validationSchema={formSchema}
              >
              {
                ({ errors,
                   touched,  
                   handleSubmit, 
                   isSubmitting, 
                   handleBlur, 
                   values, 
                   resetForm
                }) => ( 
                   <div>
                     <Form onSubmit={handleSubmit}>
                       <Card>
                         <CardHeader></CardHeader>
                         <CardBody>
                           <Row>
                             <Col md="5" sm="12">
                               <FormGroup row className="position-relative">
                                 <Col md="4">
                                   <span>Title</span>
                                 </Col>
                                 <Col md="8">
                                   <Field
                                     type="text"
                                     name="titl"
                                     id="titl"
                                     className={`
                                       form-control ${errors.titl && touched.titl && "is-invalid"}
                                     `}
                                     onBlur={handleBlur('titl')}
                                   />
                                  {errors.titl && 
                                    touched.titl ? (
                                      <div className="invalid-tooltip mt-25">
                                         {errors.titl}
                                      </div>
                                    ) : null}
                                 </Col>
                              </FormGroup>
                            </Col>
                            <Col md="2" sm="12"></Col>
                            <Col md="5" sm="12">
                              <FormGroup row className="position-relative"
                                 style={{display:rqst!="1"?'none':''}}
                              >
                               <Col md="4">
                                 <span>Email Address</span>
                               </Col>
                               <Col md="8">
                                 <Field name="emal"
                                   component={ ({field, form}) =>
                                       <AutoComplete
                                         type="email"
                                         name="emal"
                                         id="emal"
                                         suggestions={this.state.emailsugges}
                                         value={
                                            this.state.emailsugges ?
                                              this.state.emailsugges.find(option =>
                                                option.value === field.value) 
                                            : ''}
                                         className={`
                                            form-control ${errors.emal && touched.emal && "is-invalid"}
                                         `}
                                         filterKey="title"
                                         suggestionLimit={4}
                                       />} 
                                 />
                                 {errors.emal && 
                                    touched.emal ? (
                                      <div className="invalid-tooltip mt-25">
                                         {errors.emal}
                                      </div>
                                 ) : null}
                              </Col>
                            </FormGroup>
                           </Col>
                          </Row>
                         </CardBody>
                        </Card>
                       </Form>
                      </div>
                    )}
                 </Formik>
                </React.Fragment>
             )
         }
};
    
export default TicketNew;

标签： reactjsformik