动态更改自定义控件样式

Question

动态更改自定义控件样式

我正在尝试使用反应将红色边框置于每个空的自定义字段周围。数组this.state.Fields包含所有要检查的控件。 我想检查每个需要的控件，如果它的值没有设置，请更改它的style属性。由于性质不能改变，我试图用state但问题是我需要为每种控制一个单独的vriable：

<Control ref="controlLabel" name="controlLabel" type="1" onComponentMounted={this.register} label="Control Label:" required="1" value={this.state.controlLabel} localChange={this.handleControlLabelChange} inputStyle={{border: this.state.errControlLabelStyle}} /> 

我想知道如果有一个更优雅的方式来做到这一点？这里是我的代码：

this.state.Fields.forEach((field) => { 
    if(field.props.required === "1"){ 
     var validField = (field.props.value != '' && field.props.value != undefined); 
     if(!validField){ 
       //set the field style dynamically    
     } 
} 
validForm=validForm && validField; 
}); 

Answer 1

您可以在控制本身中添加验证逻辑。

var Control = React.createClass({ 
 
\t isValid: function() { 
 
    \t if (!this.props.required) { 
 
    \t return true; 
 
    } 
 
    \t return this.props.value !== '' && this.props.value !== undefined; 
 
    }, 
 

 
    render: function() { 
 
    \t let value = this.props.value; 
 
    return <div className={this.isValid() ? 'item valid' : 'item invalid'}>{value}</div>; 
 
    } 
 
}); 
 

 
var App = React.createClass({ 
 
    render: function() { 
 
    return (
 
    \t <div className="container"> 
 
     \t {[ 
 
     { 
 
      required: true, 
 
      value: '' 
 
     }, 
 
     { 
 
      required: true, 
 
      value: 'abc' 
 
     }, 
 
     { 
 
      required: false, 
 
      value: '' 
 
     } 
 
     ].map((v, i) => <Control key={i} required={v.required} value={v.value} />)} 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
);

.valid { 
 
    border-color: green; 
 
} 
 

 
.invalid { 
 
    border-color: red; 
 
} 
 
    
 
.item { 
 
    width: 200px; 
 
    height: 50px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    margin: 1px; 
 
    display: flex; 
 
} 
 
    
 
.container { 
 
    display: flex; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>