Как опросить дочерние компоненты у формы

@Kill100 · Регистрация: 11.12.2010

Author24 — интернет-сервис помощи студентам

есть вот такая вот форма +/- пару строк сверху, но это не интересно

Javascript

export const Form =({...props})=> {
    return(
            <form {...props}>
                {props.children}
            </form>
        )
};

В форме оно юзается вот так.
Причем MaterialInput при срабатывании возвращает текст и статус
{text:'', valid:true}

Javascript

render =()=> {
return <Form onSubmit={this.handleSubmit} className='col-wrapper'>
                    <div className='col-1'>
                        <MaterialInput
                            label={'UserName'}
                            onChange={this.onInputVal}
                            IsRequired={true}
                            path='username'
                            value={this.state.username}
                            regExMessage={Lang('IsRequired')}
                        />
                    </div>
                    <div className='col-1'>
                        <MaterialInput
                            label={'Password'}
                            onChange={this.onInputVal}
                            IsRequired={true}
                            path='password'
                            value={this.state.password}
                            regExMessage={Lang('IsRequired')}
                        /> </div>
                    <div className='col-1 element-padding'>
                        <MaterialButton
                            isSubmit={true}
                            className={'big screen-100'}
                        >{Lang('Login')}</MaterialButton>
                    </div>
</Form>
}

Но фишка в том, что пока я не начну вводить или не вызову потерю фокуса у поля, валидация там не работает.
Но надо, сделать как-то, что бы при срабатывании handleSubmit у формы, как-то опрашивались MaterialButton на валидность...
Как это сделать? MaterialButton имеет внутри метод isValid

Javascript

1
2
3

isValid = () => {
 return this.validate();
}

Возможно, я что-то не верно понял, но выходит я не могу пройтись по всем дочерним элементам и вызвать у них допустим ф-ю isValid?

Добавлено через 45 минут
Так, ладно. Я понял что идея с пробегом по дочерним элементам бред.
Из, за того что форма имеет разношорстную структуру, и не просто набор input'ов.
Проще хранить состояние вида, {value:'', isValid:''} а при сабмите его проверять

	22.05.2018, 16:00