使用React.JS从表单输入实时更新标头

Question

我正在用小项目从Facebook教自己React.js。对于这个问题，我想知道这是否是我所能做到的最干净、最有反应的方式。

基本结构如下：

Page
    <h2>
    <h2>
    Form
        Adaptive_Input
            <input><label.adaptive><label>
        Adaptive_Input
            <input><label.adaptive><label>
        Adaptive_Input
            <input><label.adaptive><label>

两个标题显示页面状态的信息。第一个是名称/随机文本，第二个是两个数字的加法。下面输入的是文本和两个数字。值得指出的是，这种花哨的自适应输入来自这博客文章，尽管它必须经过转换才能做出反应。输入中的更改被发送回Page以检查有效性和显示。如果输入有效，则显示输入。否则，标题将转到read，并在违规输入旁边显示警告。

同样，我刚刚开始学习React.js，所以我主要关心的是正确使用它，它是否尽可能干净，以及是否有混合或添加可以简化代码。我还了解到，React开发人员更喜欢通量模式而不是MV*，为了更好地支持流量模式，我需要对此做什么更改？

JSFiddle

JS:

/**
 * @jsx React.DOM
 */
var Adaptive_Input = React.createClass({ 
    handle_change: function(event_data){
        var new_text = event_data.target.value;//this.refs.input.getDOMNode().value;
        this.props.on_Input_Change(new_text);
    },
    render: function(){
        var cx = React.addons.classSet;
          var classes = cx({                
            'invalid_label': 'invalid_label',
            'invalid': 'invalid',
            'invisible': this.props.validity,
          });
        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>
                    <label
                        className={classes}
                    >Value is not a number.</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}
                        validity={true}
                    />
                    <Adaptive_Input
                        initial={'Value 1'}
                        focused={'Value 1'}
                        on_Input_Change={this.props.handle_value_1_input}
                        validity={this.props.value_1_valid}
                    />
                    <Adaptive_Input
                        initial={'Value 2'}
                        focused={'Value 2'}
                        on_Input_Change={this.props.handle_value_2_input}
                        validity={this.props.value_2_valid}
                    />
                </form>
                );
    }
});

var Page = React.createClass({
    getInitialState: function(){
        return {
            Name : "No Name",
            Text_Valid: true,
            Value_1 : '0',
            Value_1_Valid: true,
            Value_2 : '0',
            Value_2_Valid: true,
            Display_Value: '0',
        };
    },
    handle_text_input: function(new_text){
        this.setState({
                Name: new_text
            });
    },
    handle_value_1_input: function(new_value){
        new_value = parseInt(new_value);
        if(isNaN(new_value)){
            this.setState({
                Value_1_Valid: false, 
            });
        } else{
            var updated_display = new_value + parseInt(this.state.Value_2);
            updated_display = updated_display.toString();
            this.setState({
                    Value_1: new_value,
                    Value_1_Valid: true,
                    Display_Value: updated_display,
                });
        }
    },
    handle_value_2_input: function(new_value){
        new_value = parseInt(new_value);
        if(isNaN(new_value)){
            this.setState({
                Value_2_Valid: false, 
            });
        } else{
            var updated_display = parseInt(this.state.Value_1) + new_value;
            updated_display = updated_display.toString();
            this.setState({
                    Value_2: new_value,
                    Value_2_Valid: true,
                    Display_Value: updated_display,
                });
        }
    },
    render: function(){
        var display_class = 'invalid';
        if(this.state.Value_1_Valid && this.state.Value_2_Valid){
            display_class = 'valid';
        }
        return(
                <div>
                    <h2>{this.state.Name}</h2>
                    <h2 className={display_class}>Value 1 + Value 2 = {this.state.Display_Value}</h2>
                    <Form
                        handle_text_input={this.handle_text_input}
                        text_valid = {this.state.Text_Valid}
                        handle_value_1_input = {this.handle_value_1_input}
                        value_1_valid = {this.state.Value_1_Valid}  
                        handle_value_2_input = {this.handle_value_2_input}
                        value_2_valid = {this.state.Value_2_Valid}
                    />
                </div>
        );
    }
});

React.renderComponent(<Page />, document.body);

CSS:

.adaptive_placeholder_input_container {
    position: relative;
}

.adaptive_input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    height: 40px;
    border: 3px solid #aaaaaa;
    /*border-radius*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 0 0 1em;
    padding: 1em;
    background: #fff;
    resize: none;
    outline: none;
    box-shadow: none;
}

.adaptive_input:focus {
    border-color: #00bafa;
}

.adaptive_input:focus + .adaptive_placeholder:before {
    color: #00bafa;
}

.adaptive_input:focus + .adaptive_placeholder:before, .adaptive_input:valid + .adaptive_placeholder:before {
    /*transition-duration*/
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    /*transform*/
    -webkit-transform: translate(0, -16px) scale(0.9, 0.9);
    -moz-transform: translate(0, -16px) scale(0.9, 0.9);
    -ms-transform: translate(0, -16px) scale(0.9, 0.9);
    -o-transform: translate(0, -16px) scale(0.9, 0.9);
    transform: translate(0, -16px) scale(0.9, 0.9);
}

.adaptive_input:invalid + .adaptive_placeholder:before {
    content: attr(alt);
    box-shadow: none;
}

.adaptive_input + .adaptive_placeholder {
    pointer-events: none;
    line-height: 1em;
    position: absolute;
    left: 10px;
    top: 10px;
}

.adaptive_input + .adaptive_placeholder:before {

    content: attr(placeholder);
    display: inline-block;
    padding: 0 2px;
    color: #898989;
    /*transition*/
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    background-color: #ffffff;
}


.valid{
    color: #3472F7
}

.invalid{
    color: #FF3B30 
}

.invalid_label{
    display: inline-block;
    margin: 5px;
    font-family: Verdana, Geneva, sans-serif;
}

.invisible{
    display: none;
}

Answer 1

我唯一能一眼看到的就是你的input标签和label标签

                <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>
                <label
                    className={classes}
                >Value is not a number.</label>

输入标记具有在输入元素中设置默认文本的属性，因此它们应该是自结束标记。

label标记还具有标签内文本的属性，因此您也可以制作这些自结束标记。