如何使用React.JS正确验证输入值？
我有一个简单的表单。所有组件和状态都保存在Page组件中。有2个显示标题和3个输入字段。第一个输入应该是文本，第二个和第三个应该是int。当用户输入错误类型的数据时，我希望在输入字段旁边弹出一条错误消息。我的问题与React.JS中的最佳实践相关
谁决定该值是无效的？我假设输入字段的唯一工作是将值返回到保存状态的组件，那么这是否意味着只有Page可以确定值是否有效？
我应该如何让弹出窗口出现呢？页面是否必须触发一个新的布尔状态元素，该元素将通过perp传递给Adaptive_Input以显示错误消息？
JS:
/**
* @jsx React.DOM
*/
var Adaptive_Input = React.createClass({
handle_change: function(){
var new_text = this.refs.input.getDOMNode().value;
this.props.on_Input_Change(new_text);
},
render: function(){
return (
<div className='adaptive_placeholder_input_container'>
<input
className="adaptive_input"
type="text"
required="required"
onChange= {this.handle_change}
ref="input"
></input>
<label
className="adaptive_placeholder"
alt={this.props.initial}
placeholder={this.props.focused}
></label>
</div>
);
}
});
var Form = React.createClass({
render: function(){
return (
<form>
<Adaptive_Input
initial={'Name Input'}
focused={'Name Input'}
on_Input_Change={this.props.handle_text_input}
/>
<Adaptive_Input
initial={'Value 1'}
focused={'Value 1'}
on_Input_Change={this.props.handle_value_1_input}
/>
<Adaptive_Input
initial={'Value 2'}
focused={'Value 2'}
on_Input_Change={this.props.handle_value_2_input}
/>
</form>
);
}
});
var Page = React.createClass({
getInitialState: function(){
return {
Name : "No Name",
Value_1 : '0',
Value_2 : '0',
Display_Value: '0'
};
},
handle_text_input: function(new_text){
this.setState({
Name: new_text
});
},
handle_value_1_input: function(new_value){
console.log("===");
var updated_display = parseInt(new_value) + parseInt(this.state.Value_2);
updated_display = updated_display.toString();
this.setState({
Display_Value: updated_display
});
},
handle_value_2_input: function(new_value){
var updated_display = parseInt(this.state.Value_1) + parseInt(new_value);
updated_display = updated_display.toString();
this.setState({
Display_Value: updated_display
});
},
render: function(){
return(
<div>
<h2>{this.state.Name}</h2>
<h2>Value 1 + Value 2 = {this.state.Display_Value}</h2>
<Form
handle_text_input={this.handle_text_input}
handle_value_1_input = {this.handle_value_1_input}
handle_value_2_input = {this.handle_value_2_input}
/>
</div>
);
}
});
React.renderComponent(<Page />, document.body);回答 9
Stack Overflow用户
发布于 2014-06-13 04:12:21
首先，下面是我将提到的一个示例：http://jsbin.com/rixido/2/edit
如何使用React.JS正确验证输入值？
随心所欲。React用于呈现数据模型。数据模型应该知道什么是有效的，什么是无效的。您可以使用主干模型、JSON数据或任何想要表示数据及其错误状态的内容。
更确切地说：
React通常对你的数据是不可知的。它用于渲染和处理事件。
要遵循的规则是：
- 元素可以更改其状态。
- 他们不能更改道具。
- 他们可以调用将更改顶级道具的回调。
如何决定某件事应该是道具还是状态？考虑一下这一点:除了文本字段之外，应用程序的任何部分都想知道输入的值是错误的吗？如果不是，则将其设置为状态。如果是，它应该是一个道具。
例如，如果您想要一个单独的视图来呈现"You have 2 errors on this page“。那么你的错误就必须为顶层数据模型所知。
这个错误应该存在于哪里？
如果您的应用程序正在渲染主干模型(例如)，那么模型本身将有一个validate()方法和validateError属性，您可以使用它们。您可以呈现其他可以执行相同操作的智能对象。React还表示，尽量将道具保持在最低限度，并生成其余数据。因此，如果你有一个验证器(例如https://github.com/flatiron/revalidator)，那么你的验证可能会向下渗透，任何组件都可以用它的匹配验证来检查属性，看看它是否有效。
这在很大程度上取决于你。
(我个人正在使用骨干模型，并在React中呈现它们。我有一个顶层错误警报，如果哪里有错误，我会显示出来，描述错误。)
Stack Overflow用户
发布于 2016-05-12 21:26:18
您可以使用npm install --save redux-form
我正在写一个简单的电子邮件和提交按钮表单，它验证电子邮件和提交表单。使用redux-form时，form默认在html onSubmit操作上运行event.preventDefault()。
import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
class LoginForm extends Component {
onSubmit(props) {
//do your submit stuff
}
render() {
const {fields: {email}, handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<input type="text" placeholder="Email"
className={`form-control ${email.touched && email.invalid ? 'has-error' : '' }`}
{...email}
/>
<span className="text-help">
{email.touched ? email.error : ''}
</span>
<input type="submit"/>
</form>
);
}
}
function validation(values) {
const errors = {};
const emailPattern = /(.+)@(.+){2,}\.(.+){2,}/;
if (!emailPattern.test(values.email)) {
errors.email = 'Enter a valid email';
}
return errors;
}
LoginForm = reduxForm({
form: 'LoginForm',
fields: ['email'],
validate: validation
}, null, null)(LoginForm);
export default LoginForm;Stack Overflow用户
发布于 2017-01-18 14:56:37
我已经编写了This library，它允许您包装您的表单元素组件，并允许您以以下格式定义验证器:-
<Validation group="myGroup1"
validators={[
{
validator: (val) => !validator.isEmpty(val),
errorMessage: "Cannot be left empty"
},...
}]}>
<TextField value={this.state.value}
className={styles.inputStyles}
onChange={
(evt)=>{
console.log("you have typed: ", evt.target.value);
}
}/>
</Validation>https://stackoverflow.com/questions/24019431
复制相似问题