動態更改自定義控件樣式

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>