Как указать для поля переменную «видимость» в React?

Question

[Ninja Mate]

Есть компоненты Формы с инпутами, которые скрыты под Panel, Collapse или сразу видны пользователю. Нужно указать все видимые инпуты как обязательные для ввода.
Можно ли сделать это как-то через универсальный метод валидации? Что то типа переменной видимости и если true, то обязательно для ввода. Сложность в том, что инпутов порядка 900 в приложении... Как бы это сделать не создавая 900 функций?

Answer 1

[xtalen]

<form onSubmit={this.handleSubmitTest}>

//Мы задаем один и тот же стейт на открытие фрагмента формы и на required,
//соответственно если форма открыта, то и поле необходимо
<Input type="checkbox"  onChange={()=>this.setState({check: !this.state.check})}/>

<Input type="text" placeholder="Enter UR Number" required={this.state.check}/>

<ButtonInput type="submit" value="Submit Button"/>
</form>

Браузер будет подсказывать, что поле обязательно. Если хочешь сам валидацию делать - перехватывай событие onSubmit и проверяй event.target.myinput.required.

Comments

[Ninja Mate]

те что скрыты не нужны. в этом то и проблема

[xtalen]

Проблема в том, что вы не знаете какие из них скрыты?
Тогда ключом к решению будет вопрос "почему вы не знаете какие из них скрыты"? Если бы вы выложили немного кода я бы помог ответить))

[Ninja Mate]

Игорь Андреевич: Спасибо Вам, навели на очень хорошую мысть. Я же знаю от чего зависит их показ)

<form onSubmit={()=>this.handleSubmitTest()}>

//Мы задаем один и тот же стейт на открытие фрагмента формы и на required,
//соответственно если форма открыта, то и поле необходимо
<Input type="checkbox"  onChange={()=>this.setState({check: !this.state.check})}/>

<Input type="text" placeholder="Enter UR Number" required={this.state.check}/>

<ButtonInput type="submit" value="Submit Button"/>
 </form>

[Ninja Mate]

Игорь Андреевич: обновите немного свой ответ, отмечу как верный