在 reactjs 中验证文本区域

Question

我是 React 和 redux 的新手，目前正在研究字段验证。我能够验证 <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

您没有按照预期的方式使用 React。验证应该主要发生在你的状态。您可以验证您的字段，但这对用户来说比对您来说更多。

输入应该简单地从状态中获取属性作为 value 并且它们的 onChange 方法应该更新状态。所有输入类型都有一个 onChange，这是您使用新值（即使它是一个新字母）更新状态的方式，并且由于状态已更新，因此输入设置为更新后的值。

Here is the link to the docs

例如：

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

并且在你的 class 中有

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';);
    }
}

现在，如果您想要显示漂亮的验证消息，假设用户单击保存并且状态的某些部分未正确填写，我建议您创建自己的代码来更改 UI通知用户或者那里有很多不错的库。

您在使用 renderField 时将表单元素类型问题强加给了自己。您有两个选择：1- 不要尝试渲染您自己的组件或 2- 考虑不同的表单类型（文本区域、选择框和输入）。

您正在使用的库使您能够简单地说出 <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} />

在 reactjs 中验证文本区域

Validation for textarea in reactjs

validation

jquery

reactjs

redux

redux-form