当前位置: 首页 > 面试题库 >

如何使用React.JS正确验证输入值?

法和安
2023-03-14
问题内容

我有一个简单的表格。所有组件和状态都保存在Page组件中。有2个显示标题和3个输入字段。第一个输入应该是文本,第二个和第三个输入应该是整数。当用户输入错误的数据类型时,我想在输入字段旁边弹出一条错误消息。我的问题与React.JS的最佳做法有关

谁认为该值有效?我想输入字段的唯一工作就是将值引导回到保持状态的组件,这是否意味着只有Page可以确定值是否有效?

然后应该如何显示弹出窗口?Page是否应该触发将通过perp传递的新布尔状态元素,该元素将告诉Adaptive_Input显示错误消息?

JSFiddle

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

问题答案:

首先,下面是我将在下面提及的示例:http :
//jsbin.com/rixido/2/edit

如何使用React.JS正确验证输入值?

随你怎么便。React是用于渲染数据模型的。数据模型应该知道什么是有效的。您可以使用Backbone模型,JSON数据或任何您想要表示数据及其错误状态的东西。

进一步来说:

React通常与您的数据无关。它用于呈现和处理事件。

遵循的规则是:

  1. 元素可以更改其状态。
  2. 他们不能改变道具。
  3. 他们可以调用将更改顶级道具的回调。

如何决定某个东西应该是道具还是国家?考虑一下:您的应用程序中除文本字段以外的任何部分都想知道输入的值是否错误?如果否,则将其设置为状态。如果是的话,那应该是一个道具。

例如,如果您想要一个单独的视图来呈现“此页面上有2个错误”。那么顶级数据模型就必须知道您的错误。

该错误应该存在何处?
例如,如果您的应用正在渲染Backbone模型,则模型本身将具有您可以使用的validate()方法和validateError属性。您可以渲染其他可以执行相同操作的智能对象。React还说,要尽量减少道具并生成其余数据。因此,如果您有一个验证器(例如https://github.com/flatiron/revalidator),则您的验证可能会trick滴而下,任何组件都可以通过匹配验证来检查道具,以查看其是否有效。

这在很大程度上取决于您。

(我 个人 使用的是Backbone模型,并在React中渲染它们。我有一个顶级错误警报,可以显示是否有错误,并描述错误。)



 类似资料:
  • 问题内容: 我的联系页面形式如下, 需要为所有字段添加验证。谁能帮我在此反应形式中添加验证? 问题答案: 您应该避免使用refs,可以使用function来实现。 每次更改时,请更新已更改字段的状态。 然后,您可以轻松地检查该字段是否为空或您想要的其他内容。 您可以执行以下操作: 在此示例中,我仅对电子邮件和姓名进行了验证,但是您知道如何进行验证。其余的你可以自己做。 也许有更好的方法,但是您会明

  • 我试图找到一个完整的模式列表,用于通过HTML5表单验证各种类型的输入,特别是、、等等,但我找不到任何模式。目前,这些输入验证的内置版本远非完美(甚至不检查输入的内容是否是电话号码)。所以我想知道,我可以使用哪些模式来验证用户在输入中输入了正确的格式? 以下是一些默认验证允许不允许的输入的例子: 这个字段允许在@后面有不正确域的电子邮件,它允许地址以破折号或句号开始或结束,这也是不允许的。因此,是

  • 问题内容: 我是从记录用户输入使用。我需要验证输入内容,例如: 必须为非负数 它必须是字母 …等等 最好的方法是什么? 问题答案: 示例1:验证正整数 这是一个用于int从输入中验证肯定的简单示例。 结果: 请注意,与更详细组合相比,使用起来要容易得多。通过合同,一个 保证,如果它,然后将安静地给你int,并不会引发任何。 示例2:同一令牌上有多个 请注意,上面的代码段包含一个语句,以使Scann

  • 在尝试使用JSR-303(hibernate Validator)验证模型时,我在将

  • 只是想寻求一点帮助!我现在正在做一个体重转换项目。我已经让它正常工作了,但现在我正试图让它成为傻瓜式的,也就是说,如果用户输入的数值低于或超过某个范围(在本例中,我寻找的是0到450之间的KG),则会出现一条消息,告知错误,然后会提示用户再次输入其值。我可以用下面的代码实现这一点,但问题是,当用户输入一个有效值时,它不仅会打印有效输入的转换,还会打印之前不正确的值的转换。我附上了一个命令提示符的屏

  • umi max如何使用useModel? 我使用了ant-design-pro脚手架,在里面使用了useModel,创建了一个 文件名为 useTestModel.ts文件,目录结构为 ./src/pages/System/useTestModel 我在另一个文件里使用useModel,提示找不到此文件 在其他文件中使用 页面一直提示找不到 counter 我看umi max的文档写的也不清不楚的