Рендеринг Formik Field вне формы Formik
Любой родитель, который существует в момент привязки события, и если ваша страница динамически создавала элементы с помощью кнопки имени класса, вы привязывали бы событие к родительскому, который уже существует
$(document).ready(function(){
//Particular Parent chield click
$(".buttons").on("click","button",function(){
alert("Clicked");
});
//Dynamic event bind on button class
$(document).on("click",".button",function(){
alert("Dymamic Clicked");
});
$("input").addClass("button");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
<input type="button" value="1">
<button>2</button>
<input type="text">
<button>3</button>
<input type="button" value="5">
</div>
<button>6</button>1 ответ
Компонент Field - это то, что связывает поле формы с состоянием Формика. Он использует контекст под капотом; Formik является поставщиком контекста, а Field является потребителем контекста. Field связан с Formik и не имеет смысла вне его. Для вашего случая использования, когда вы хотите визуализировать поля формы, которые иногда связаны с Formik, а иногда нет, я бы экспортировал два разных компонента:
- Базовый компонент Checkbox, который не имеет ничего общего с Formik. Он должен просто использовать обычный ввод
- Обертка поля вокруг этого компонента Checkbox
В то время как компонент Field может взять type, в результате чего он отобразит соответствующий вход, он также может взять реквизит рендера для рендеринга того, что вы хотите, и ему передается все состояние, которым управляет Formik для этого поля.
Например, ваши компоненты Checkbox и CheckboxField могут выглядеть примерно так:
const Checkbox = (props) => {
...
return (
<div className={myClass1}>
<input type='checkbox' checked={props.checked} onChange={props.onChange} />
<label ...>{props.label}</label>
</div>
)
};
const CheckboxField = (props) => {
return (
<Field name={props.name}>
{(field) => <Checkbox label={props.label} {...field} />}
</Field>
)
}
Теперь вы используете два компонента, которые отображаются одинаково, но один предназначен для использования в форме Formik ( CheckboxField), а другой может использоваться где угодно (Checkbox).