所以这是我的代码：
// @flow
import * as React from "react";
import styled from "styled-components";
import {Meteor} from "meteor/meteor";
import {Form, Header, Dropdown, Message, Label, Select} from "semantic-ui-react";
import {ImageUploadControl as ImageButton} from "../ImageUploadControl";
import { withFormik, Field } from "formik";
import Yup from "yup";
import { translate, Trans } from 'react-i18next';
import Images from "../../../../api/filesCollection";
import {countryList} from "./molecules/country-list";
const StyledForm = styled(Form)`
display: ${props => props.display || 'flex'};
flex-direction: column;
flex-wrap: wrap;
margin-bottom: 50px;
width: 580px;
padding: 20px;
background: #eee;
border-radius: 10px;
`;
const Row = styled.div`
display: flex;
justify-content: space-between;
margin-bottom: 20px;
`;
const Error = styled.div`
width: 100%;
text-align: center;
margin-top: -20px;
color: white;
padding: 10px;
`;
const Divider = styled.div`
flex: ${props => props.flex || '1'};
`;
function addressInnerFormHOC(WrappedComponent) {
return class Container extends React.Component {
constructor(props){
super(props);
this.state = {
firstName: Meteor.user().profile.firstName,
lastName: Meteor.user().profile.lastName,
country: Meteor.user().address ? Meteor.user().address.country : '',
city: Meteor.user().address ? Meteor.user().address.city : '',
address: Meteor.user().address ? Meteor.user().address.address : '',
addressSubmitted: Meteor.user() ? Meteor.user().profile.addressSubmitted : false,
identitySubmitted: Meteor.user() ? Meteor.user().profile.identitySubmitted : '',
phoneSubmitted: Meteor.user() ? Meteor.user().profile.phoneSubmitted : '',
formErrors: {country: "", city: "", address: ""},
formValid: false,
showErrorMessage: false,
submitted: false,
file: []
};
}
handle_file_upload = (e) => {
e.preventDefault()
const file = e.target.files[0];
file['uploadId'] = e.target.id;
console.log(file);
const files = this.state.file;
this.setState({file: [...files, file]});
};
render() {
const props = {
...this.props,
...this.state,
handle_on_select_country: this.handle_on_select_country,
handle_file_upload: this.handle_file_upload
}
return <WrappedComponent {...props} />;
}
}
}
class AddressInnerForm extends React.Component {
render() {
const {
values,
errors,
touched,
handleChange,
handleSubmit,
isSubmitting,
countrySelected,
setFieldTouched,
setFieldValue,
display,
country,
city,
handle_file_upload,
t
} = this.props;
return (
<StyledForm id="step2" display="flex" onSubmit={handleSubmit}>
{console.log('THIS', this)}
<Header as="h2">{t('address.You must verify your address')}</Header>
<Row>
<Divider flex="9">
<Label size="large" style={{flex: 1, width: "100%", background: "#eee", color: "black", fontWeight: "600"}}>
{t('address.Country')}
<Dropdown
selection
id="country"
name="country"
label="Request Type"
options={countryList}
value={values.country}
error={!!errors.country}
onBlur={() => setFieldTouched("country", true)}
onChange={(e, {value}) => setFieldValue("country", value)}
/>
</Label>
{touched.country && errors.country && <Error><Label color="red" pointing style={{flex:1}}>{errors.country}</Label></Error>}
</Divider>
<Divider />
<Divider flex="9">
<Label size="large" style={{flex: 1, background: "#eee", color: "black", fontWeight: "600"}}>
{t('address.City')}
<Field
label={t('address.City')}
value={city}
name="city"
style={{marginTop: "5px"}}
onChange={handleChange}
/>
</Label>
{touched.city && errors.city && <Error><Label color="red" pointing style={{flex:1}}>{errors.city}</Label></Error>}
</Divider>
</Row>
<Row>
<Label size="large" style={{flex: 1, background: "#eee", color: "black", fontWeight: "600"}}>
{t('address.Address')}
<Field
label={t('address.Address')}
value={values.address}
name="address"
style={{marginTop: "5px"}}
onChange={handleChange}
/>
</Label>
{touched.address && errors.address && <Error><Label color="red" pointing style={{flex:1}}>{errors.address}</Label></Error>}
</Row>
<Field name="country" value={country}/>
<hr style={{borderColor: "#151414"}}/>
<Header as="h4">{t('address.Please attach legal documents confirming your address')}</Header>
<div style={{textAlign: "center", marginTop: "10px", marginBottom: "10px"}}>
<label as="label" htmlFor="adr">
<Field
id="adr"
type="file"
name="file"
onChange={handle_file_upload}
/>
</label>
</div>
<label className="control-label">{t('address.Required photos')}</label>
<div className="form-group">
<ol>
<li>{t('address.Passport page / ID card side showing address of registration')}</li>
<li>
{t('address.Additional document from the list as address confirmation')}
<ul className="list-group">
<li className="list-group-item">{t('address.utility bills (gas, water, phone, etc)')}</li>
<li className="list-group-item">{t('address.official bank statements')}</li>
<li className="list-group-item">{t('address.tax authority letters or other official documents')}</li>
</ul>
</li>
<li>{t('address.Additional document must be not more than 6 months old')}</li>
</ol>
<hr style={{borderColor: "#151414"}}/>
<label className="control-label">
{t('address.photos.Submitted photos must adhere to the following requirements')}
</label>
<ul className="list-group">
<li className="list-group-item">{t('address.photos.Photos must depict account owner')}</li>
<li className="list-group-item">{t('address.photos.Resolution must be no less than 600x600 pixels')}</li>
<li className="list-group-item">{t('address.photos.Photos must be crisp, not blurred')}</li>
<li className="list-group-item">{t('address.photos.No part of your documents must be covered or obscured by fingers')}</li>
<li className="list-group-item">{t('address.photos.All the data must be clearly visible')}</li>
<li className="list-group-item">{t('address.photos.File size must not exceed 2 mb')}</li>
<li className="list-group-item">{t('address.photos.Accepted formats are JPEG, JPG, PNG, PDF')}</li>
</ul>
</div>
<div style={{textAlign: 'center'}}>
<Form.Button color="blue">
{t('interface.Next')}
</Form.Button>
</div>
</StyledForm>
);
}
}
const AddressForm = withFormik({
mapPropsToValues({country, city, address, display, t}){
return {
city: city || Meteor.user() && Meteor.user().address ? Meteor.user().address.city : false,
country: country || "ax",
address: address || "",
display: display || "flex",
t: t || undefined
}
},
validationSchema: (values) => {
return Yup.object().shape({
country: Yup.string()
.required(values.t('validations.Should not be empty')),
city: Yup.string()
.required(values.t('validations.Should not be empty')),
address: Yup.string()
.required(values.t('validations.Should not be empty'))
})
},
update_User(userDoc): void {
const {
address: {
country,
city,
address
}
} = userDoc;
Meteor.call("updateUser", Meteor.userId(), userDoc, (err,res) => {
});
},
handleSubmit(values, {resetForm, setErrors, setSubmitting}) {
console.log(values);
let thirdStep = document.getElementById("step3");
thirdStep.style.display ="flex";
thirdStep.scrollIntoView();
console.log('vvvvvvvvv');
this.update_User({
address: {
country: values.country,
city: values.city,
address: values.address
}
});
}
})(AddressInnerForm);
export const AddressVerificationFormTranslated = translate('common')(addressInnerFormHOC(AddressForm));
一切正常。下拉值正在保存到数据库。但是表格太滞后了。更改输入字段中的一个符号需要几秒钟的时间。在控制台中，每当我更改一些输入（不是下拉菜单）时，我都可以看到很多这样的消息：
DropdownItem modules.js?hash=eb4012bb908568d7083676c349a99fe3eceb0380:14627
DropdownItem modules.js?hash=eb4012bb908568d7083676c349a99fe3eceb0380:14627
...
请帮帮我，伙计们！生无可恋！