カスタムコントロールスタイルを動的に変更する

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>