У меня есть компонент, в котором я отображаю:
<form
onSubmit={this.props.handleSubmit(values => this.onSubmit(values))}
className="userForm"
>
<label htmlFor="message" />
<Field
component={Input}
type="text"
name="message"
placeholder="Add a message"
validate={[nonEmpty, isTrimmed, messageLength]}
/>
<input
type="submit"
value="Submit"
disabled={this.props.pristine || this.props.submitting}
/>
</form>
Я подключаю этот компонент через Redux:
const mapStateToProps = state => ({
messages: state.interaction.currentBase.messages
});
MessageList = requiresLogin()(connect(mapStateToProps)(MessageList));
export default reduxForm({
form: "messagelist"
})(MessageList);
Тогда у меня есть очень простые валидаторы, чтобы назвать один:
export const nonEmpty = value =>
value.trim() !== "" ? undefined : "Cannot be empty";
Полученное сообщение об ошибке говорит о том, что значение не определено. Первый и второй фрагменты кода здесь находятся в одном файле .js, валидаторы за секунду, который правильно импортируется (иначе я не получил бы ошибку из validator.js).
Я не могу сказать, где или как вызывается валидатор, не говоря уже о параметре, который он получает. Я думал, что это происходит в файле input.js, который обрабатывается с помощью component={Input}
, но компонент не связан с redux и не имеет ссылки на значение.
Как передать значение валидаторам? Я должен сказать, что у меня есть форма регистрации, которую я использовал, в которой все вышеперечисленное работает нормально.