Я работаю над добавлением проверки некоторых полей только в том случае, если в приложение загружен файл, я реализовал пользовательскую проверку, но на входе есть только сообщение об ошибке, но я не могу добавить входную проверку, которая выглядит как дизайн муравья обеспечивает.
В своей пользовательской проверке я реализовал только сообщение об ошибке.
это форма, которую нужно проверить, если вмененный файл:
<StyledSelectInput
showSearch
placeholder="Select a builder"
optionFilterProp="children"
onChange={this.setSelectValue('builder')}
filterOption={this.selectFilterOptions}
>
{builderOptions}
</StyledSelectInput>
{this.state.missingBuilder && <ValidationMessage>Please input a builder!</ValidationMessage>}
</Col>
</Row>
<Row>
<Col>
<StyledSelectInput
showSearch
placeholder="Select a community"
optionFilterProp="children"
onChange={this.setSelectValue('community')}
filterOption={this.selectFilterOptions}
>
{communityOptions}
</StyledSelectInput>
{this.state.missingCommunity && <ValidationMessage>Please input a community!</ValidationMessage>}
</Col>
</Row>
<Dragger multiple={false}
accept=".csv"
onChange={this.handleUploadChange}
customRequest={this.processCSV}
onRemove={this.removeFile}
fileList={this.state.fileList}
>
<p className="ant-upload-drag-icon">
<Icon type="upload" />
</p>
<p className="ant-upload-text">Click to upload or drag a .csv file to this area to upload </p>
</Dragger>
And these are the functions for the custom validation:
handleSubmit = (e) => {
e.preventDefault();
if (this.state.csvUploaded) {
const {builder, community} = this.state;
const nextState = {};
if (!builder) nextState.missingBuilder = true;
if (!community) nextState.missingCommunity = true;
if (isEmpty(nextState)) {
let homesPayload = this.state.homesPayload;
homesPayload = homesPayload.map((home) => {
home.builderId = builder;
home.communityId = community;
return home;
});
return this.store({homes: homesPayload});
}
return this.setState(nextState);
}
this.props.form.validateFields((err, values) => {
const payload = {
home: values
};
if (!err) {
this.setState({loading: true});
this.store(payload)
}
});
};
setSelectValue = (type) => {
return (value) => {
const nextState = { [type]: value };
if (type === 'builder')
nextState.missingBuilder = false;
if (type === 'community')
nextState.missingCommunity = false;
this.setState(nextState)
}
};
я ожидаю, что проверка будет выглядеть как проверка проекта муравья