Я искал проверку MOBX для поля ввода, но я не смог ничего найти, я нашел «MobX-input», который требует формы, но у меня нет никакой формы. Другой, который я обнаружил, был "mobx-react-form" с ValidatorJs, который снова использует форму. любой намек или пример будут оценены. Я просто хочу использовать его в обычном поле ввода
<Input placeholder="FirstName" type="text"
defaultValue={Contact.FirstName} onChange={(e) => handler(e)} />
Простую проверку довольно легко создать самостоятельно с помощью MobX. Для одного такого поля простой метод проверки функции может выглядеть так:
в компоненте у нас есть поле ошибки, которое показывает только, был ли введен ввод (который может быть вызван нажатием кнопки или чем-то еще)
return <div>
<input placeholder="FirstName" type="text"
defaultValue={Contact.FirstName} onChange={(e) => handler(e)} />
{submitted && <span className="error-message">{Contact.FirstNameError}</span>}
</div>;
В наблюдаемом классе (я использовал стиль без декоратора) мы определяем поле как наблюдаемое, а класс сообщения об ошибке как вычисляемое значение.
class Contact {
constructor() {
extendObservable({
submitted: false,
FirstName: observable(),
FirstNameError: computed(() => {
if(this.FirstName.length < 10) {
return 'First name must be at least 10 characters long';
}
// further validation here
return undefined;
})
})
}
}
Вы можете легко добавить дополнительное hasError вычисленное значение, которое просто проверяет, есть ли у FirstNameError значение.
Этот метод масштабируется до нескольких входов. Если у вас их будет много, тогда вам захочется изучить абстракцию, такую как сторонняя библиотека или что-то, что вы сами пишете, чтобы управлять своими проверками. Вы можете написать функцию для генерации требуемых вычисленных свойств на основе небольшой конфигурации.
