Question

我是新的反应和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>

)
}
}

请帮忙，

非常感谢，词shash

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

现在，如果你想要显示漂亮的验证消息，如果让我们说用户点击保存并且状态的某些部分未正确填写，我建议您创建自己的代码来更改UI以通知用户或那里那里有很多漂亮的图书馆。

您已使用renderField强加了表单元素类型问题。您有两种选择：1-不要尝试为不同的表单类型（textareas，selectbox和＆amp; inputs）呈现自己的组件或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} />

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


     }/>

在reactjs中验证textarea

2 个答案: