驗證textarea在reactjs

我是新來的反應和redux，目前正在驗證字段。我能夠驗證<Field type="text" component="input" />類型字段。但如何驗證selectbox，textarea和radio按鈕。驗證textarea在reactjs

下面是我的驗證代碼爲<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> 

) 
} 
}

請幫幫忙，

謝謝了，詞shash

來源

2017-01-17 shash

你沒有利用它的目的的方式作出反應。驗證應該主要在您的州進行。您可以驗證您的字段，但這對用戶來說比對您更有用。

由於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-賬戶的不同的表單類型（textareas，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} />

來源

2017-01-17 12:12:49 Osman

謝謝你，沒什麼太大的幫助。但是我使用的是redux-form 6.4.3，我想驗證這個redux-form字段。請建議。 – shash

我從來沒有使用過這個庫。從他們的文檔看來，您似乎需要更改renderField函數以返回正確的表單元素類型。我會刪除所有不是輸入的HTML，並有一些屬性定義了您應該呈現的類型。我不是通過我的電腦，但今天晚些時候可以發佈一個例子 – Osman

看到我的編輯，如果他們不幫助我建議重新問你的具體圖書館的問題，因爲這個答案回答你問的問題。 – Osman

通過管理狀態處理驗證可以使您的生活艱難，而事實上如果我們認爲這是一項不必要的努力。

我寫了一個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); 
         } 


    }/>

來源

2017-01-18 10:08:37

驗證textarea在reactjs

回答

相關問題