Валидация для textarea in reactjs

Question

Я новичок, чтобы реагировать и сокращать, в настоящее время работает над проверкой полей. Я могу проверить поля типа <Field type="text" component="input" />. Но как подтвердить selectbox, textarea и radio кнопок.

Ниже мой код проверки для <Field type="text" component="input" />

const required = value => value ? undefined : 'Required' 

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <input {...input} placeholder={label} type={type}/> 
     {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} 
    </div> 
    </div> 
) 

class myApp extends React.Component { 

render() { 

return (
<div> 
<Field type="text" component={renderField} validate={required} /> 
</div> 

) 
} 
} 

Пожалуйста, помогите,

Спасибо большое, Шаш

Answer 1

Вы не используя реагировать так, как он предназначен. Валидация должна происходить в основном в вашем государстве. Вы можете проверить свои поля, но это больше для пользователя, чем для вас.

Входы должны просто взять свойство из состояния как value, а их метод onChange должен обновить состояние. Все типы входных данных имеют onChange, так как вы обновляете состояние с новым значением (даже если оно является одной новой буквой), и поскольку состояние было обновлено, значение вводится в обновленное значение.

Here is the link to the docs

например:

<input 
.... 
onChange={this.onChange} 
/> 

и в вашем классе есть

onChange(value){ 
    this.setState({inputValue: value}); 
} 

Затем, если вы хотите проверить обязательное поле просто проверить состояние вашего:

//this is an example function you can call when the save button is clicked 
onSave(){ 
    if(this.props.isRequired && this.state.value == ''){ 
     alert('The input '+this.state.label+' requires a value';); 
    } 
} 

Теперь, если вы хотите показать симпатичные сообщения о проверке, если вы скажете, что пользователь нажимает кнопку «Сохранить», и есть части состояния, которые не заполнены правильно, я бы рекомендовал либо создать собственный код, изменяющий пользовательский интерфейс, чтобы уведомить пользователя, либо есть много хороших библиотек.

Вы наложили вопрос типа элемента формы на себя с помощью использования renderField. У вас есть два варианта: 1- не пытайтесь отображать свой собственный компонент или 2- учет для разных типов форм (текстовые поля, selectboxs, &).

Библиотека, которую вы используете, дает вам возможность просто сказать <Field type="text" component={'textarea'} validate={required} /> или <Field type="text" component={'input'} validate={required} />. Для использования в записи это шаблон, который я бы рекомендовал использовать. Если вы хотите использовать существующую систему вам нужно будет создать систему для определения того, следует ли оказывать вход или текстовое поле, например:

const renderInputField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
     <label>{label}</label> 
      <div> 
       <input {...input} placeholder={label} type={type}/> 
       {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} 
      </div> 
    </div> 
) 

const renderTextareaField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
     <label>{label}</label> 
      <div> 
       <textarea {...input} placeholder={label} type={type}/> 
       {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} 
      </div> 
    </div> 
) 

//in your render function simply call 
<Field type="text" component={renderInputField} validate={required} /> 
<Field type="text" component={renderTextareaField} validate={required} /> 

Answer 2

Обработка проверки на управление государством может сделать вашу жизнь жестким, и в самом деле, если мы серьезно думаем, что это ненужные усилия.

Я написал library, который позаботится обо всем, что связано с проверкой полей на стороне клиента.

Чтобы проверить свои поля, вам просто нужно обернуть компонент поля, и все готово ... экономя при этом управление вручную вручную.

<Validation group="myGroup1" 
    validators={[ 
      { 
      validator: (val) => !validator.isEmpty(val), 
      errorMessage: "Cannot be left empty" 
      }, ... 
     }]}> 
      <TextField value={this.state.value} 
         className={styles.inputStyles} 
         style={{width: "100%"}} 
         onChange={ 
         (evt)=>{ 
          console.log("you have typed: ", evt.target.value); 
         } 


    }/>