Невозможно отобразить DatePicker во всплывающем окне добавления новых валидаторов.
Когда я кончаю компонент, которыйimport { DatePicker } from '@material-ui/pickers
и если я использую Validation => добавить новые валидаторы, всплывающее окно не сможет отобразить DatePicker и выдать «пойманную ошибку: неверный вызов перехвата». Хуки можно вызывать только внутри тела функционального компонента. Это может произойти по одной из следующих причин:
- У вас могут быть несовпадающие версии React и средства рендеринга (например, React DOM).
- Возможно, вы нарушаете правила хуков
- У вас может быть более одной копии React в одном приложении.
and
вышеописанная ошибка произошла в компоненте`
мой пользовательский компонент выглядит так:
import React, { createElement } from 'react';
import { DatePicker } from '@material-ui/pickers';
import { ElementFactory, Question, Serializer, SvgRegistry } from 'survey-core';
import { SurveyQuestionElementBase, ReactQuestionFactory } from 'survey-react-ui';
import { PropertyGridEditorCollection } from 'survey-creator-react';
import { localization } from 'survey-creator-core';
import { ReactComponent as CalendarIcon } from './icons/calendar.svg';
const CUSTOM_TYPE = 'year-picker';
import ReactDOMServer from 'react-dom/server';
export default class QuestionYearPickerModel extends Question {
getType() {
return CUSTOM_TYPE;
}
}
//register `QuestionYearPicker` as a model for the `year-picker` type
export function registerYearPicker() {
ElementFactory.Instance.registerElement(CUSTOM_TYPE, (name) => {
return new QuestionYearPickerModel(name);
});
}
const locale = localization.getLocale('');
locale.qt[CUSTOM_TYPE] = 'Year Picker';
// // Register an SVG icon for the question type
const svg = ReactDOMServer.renderToString(<CalendarIcon />);
SvgRegistry.registerIconFromSvg(CUSTOM_TYPE, svg);
// Add question type metadata for further serialization into JSON
Serializer.addClass(
CUSTOM_TYPE,
[],
function () {
return new QuestionYearPickerModel('');
},
'question',
);
// A class that renders questions of the new type in the UI
export class SurveyQuestionYearPicker extends SurveyQuestionElementBase {
constructor(props) {
super(props);
this.state = { value: this.question.value };
}
get question() {
return this.questionBase;
}
get value() {
return this.question.value;
}
handleValueChange = (data) => {
this.question.value = data;
};
// Support the read-only and design modes
get style() {
return this.question.getPropertyValue('readOnly') || this.question.isDesignMode
? { pointerEvents: 'none' }
: undefined;
}
renderElement() {
return <div style={this.style}>{renderYearPicker(this.value, this.handleValueChange, this.question)}</div>;
}
}
export function renderYearPicker(value, handleValueChange, question) {
return (
<DatePicker
label={'Year'}
openTo="year"
views={['year']}
onChange={handleValueChange}
value={value || null}
disabled={question.isReadOnly}
/>
);
}
// Register `SurveyQuestionYearPicker` as a class that renders `year-picker` questions
ReactQuestionFactory.Instance.registerQuestion(CUSTOM_TYPE, (props) => {
return createElement(SurveyQuestionYearPicker, props);
});
// Register the `year-picker` as an editor for properties of the `year-picker` type in the Survey Creator's Property Grid
PropertyGridEditorCollection.register({
fit: function (prop) {
return prop.type === 'year-picker';
},
getJSON: function () {
return {
type: CUSTOM_TYPE,
};
},
});
а создатель — import и RegisterYearPicker();