#javascript #reactjs #redux-form
#javascript #reactjs #redux-форма
Вопрос:
У меня есть форма авторизации, в которой Field
существует 2 s, и ее довольно легко проверить. Вот как я это делаю:
const reducers = {
// ... your other reducers here ...
form: formReducer
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)
class Authorization extends Component {
constructor() {
super();
}
render() {
return (
<Provider store={store}>
<AuthForm/>
</Provider>
)
}
}
AuthForm extends Component {
validate_login = values => {
console.log("Validating login... Login is", values)
}
validate_pwd = values => {
console.log("Validating password... Passwd is", values)
}
render() {
const { handleSubmit } = this.props
return (
<form onSubmit={handleSubmit} className="authorization-center-wrapper">
<div className="authorization-column-wrapper">
<label className="authorization-RTA-text" onClick={this.home_page}>RTA</label>
<label className="authorization-auto-text">AUTH</label>
<div className="authorization-center-content">
<Field validate={[this.validate_login]} name={"login"} component={'input'} type="text" placeholder="Email" className="authorization-login-input"/>
<Field validate={[this.validate_pwd]} name={"password"} component={'input'} type="password" placeholder="Password" className="authorization-password-input"/>
<button className="authorization-come-in-btn" type={"submit"}>Log in</button>
<p className="authorization-forgot-password" onClick={this.forgot_pass}>Forgot password?</p>
<Link to={"/reg"} className="authorization-reg-btn" onClick={this.reg_page}>Sign up</Link>
</div>
</div>
</form>
)
}
}
AuthForm = reduxForm({
// a unique name for the form
form: 'authorization'
})(AuthForm)
ReactDOM.render(<Authorization/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Теперь он работает нормально, но у меня есть регистрационная форма, где у меня есть 10 полей. Существует ли какой-либо цикл или sth для проверки значений на предмет того, что они не пустые? (Желательно без атрибутов validate), я не могу найти какое-либо решение в Интернете.
Не удается создать воспроизводимый код, потому что не знаю, как это сделать в stackoverflow с помощью react
Заранее благодарю
Комментарии:
1. ilushahot Добро пожаловать в SO. Если вы хотите привести воспроизводимые примеры для react, вы можете попробовать использовать codesandbox.io в будущем. И добавьте ссылку в свой пост
2. @arjithn хорошо, я запомню