子要素の入力要素のスタイリングを親要素からステートまたは小道具を使用して変更する

Question

子要素（UpdateInputBox）の入力要素のボーダーボックスを更新する方法を見ています。 （TextInput）から親のプロップを作成します。入力要素を調べると、新しいクラスが入力要素に追加されているのがわかりますが、スタイリングは更新されません。

私の子供のコンポーネントが小道具の変更に描画されていない可能性がありますので、これが気分です。以下

コード：

JSXは

import React from 'react'; 
    import styles from './styles.scss'; 

    export default class TextInput extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       selectedStateForText: 'textInputNonFocussed' 
      } 
      this.changeInputState = this.changeInputState.bind(this); 
    } 

    changeInputState(e) { 
     this.setState({ 
      selectedStateForText: e.target.value, 
     }); 
    } 

    render() { 
     return (
       <h1>Individual input Test Component</h1> 
       <UpdateInputBox updateClass={this.state.selectedStateForText}/> 
       <form className='textInputStyleSelector' onChange={this.changeInputState.bind(this)}> 
        <input type='radio' name='class' value='textInputNonFocussedValid' checked={this.state.selectedStateForText === 'textInputNonFocussedValid'} />Non-Focussed Valid 
        <input type='radio' name='class' value='textInputFocussedValid' checked={this.state.selectedStateForText === 'textInputFocussedValid'} />Focussed Valid 
        <input type='radio' name='class' value='textInputNonFocussedInvalid' checked={this.state.selectedStateForText === 'textInputNonFocussedInvalid'} />Non-Focussed Invalid 
       </form> 

      </div> 
     ); 
    } 
} 

class UpdateInputBox extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state= { 
      updateClass: props.updateClass 
     } 
    } 

    render() { 
     return (
      <input id='inputStyleComponents' className={this.state.updateClass} placeholder='Label text *' type='text' /> 
     ); 
    } 
} 

スタイルSCSSファイル

$titanium: #686868; 
$font-input-placeholder: Regular; 
$font-size-small: 12px; 
$emerald: #3dc238; 
$ruby: #a3403e; 

.textInputContainer { 
    background-color: white; 
} 


.inputStyleComponents { 
    display: inline-block; 
    margin: 10px; 
} 

// placeholder default css 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: $titanium; 
    font-family: $font-input-placeholder; 
    font-size: $font-size-small; 
} 
::-moz-placeholder { 
    color: $titanium; 
    font-family: $font-input-placeholder; 
    font-size: $font-size-small; 
} 
:-ms-input-placeholder { 
    color: $titanium; 
    font-family: $font-input-placeholder; 
    font-size: $font-size-small; 
} 


// Text Field Non Focussed class (styles can be applied to the input element but defining a class for testing) 
input[type=text] { 
    border: 1px solid $titanium; 
    border-radius: 3px; 
    padding: 8px 10px; 
    vertical-align: middle; 
    outline: none; 
} 

input[type=text]:focus, .textInputFocussed { 
    box-shadow: 0px 0px 5px lavender; 
} 

.textInputNonFocussedValid { 
    box-shadow: 0px 0px 5px $emerald; 
} 

.textInputFocussedValid { 
    box-shadow: 0px 0px 5px springgreen; 
} 

.textInputNonFocussedInvalid { 
    box-shadow: 0px 0px 5px $ruby; 
} 

.textInputFocussedInvalid { 
    box-shadow: 0px 0px 5px crimson; 
} 

input[type=text]:disabled { 
    opacity: 0.5; 
    background-color: #fff; 
} 

input[type=radio] { 
    margin: 10px; 
} 

Answer 1

親コンポーネントの状態が更新されると、子供の状態はあなたのように更新されません。 UpdateInputBoxコンストラクタは1回だけ実行されるため、UpdateInputBoxの状態は1回だけ設定されます。 componentWillReceivePropsで受け取ったpropsに基づいて、UpdateInputBox州を更新する必要があります。あなたは以下のような何かをしなければなりません。お役に立てれば。

class UpdateInputBox extends React.Component { 
constructor(props){ 
    super(props); 
    this.state= { 
     updateClass: props.updateClass 
    } 
} 

componentWillReceiveProps(nextProps) { 
if(this.props.updateClass !== nextProps.updateClass) { 
    this.setState({updateClass: nextProps.updateClass}); 
} 
} 

render() { 
    return (
     <input id='inputStyleComponents' className={this.state.updateClass} placeholder='Label text *' type='text' /> 
    ); 
} 

}

Answer 2

ファイルscssファイル内のクラス名を確認してください。クラスtextInputNonFocussedに対して定義されたルールはありません。このクラスのルールを、適用したいスタイルで定義してみてください。

例：あなたはクラスが追加されていることを述べてきたように

input.textInputNonFocussed { 
    color: gray; 
} 

これは、問題を解決する必要があります。

Answer 3

は@Panther：

リアクトライフサイクルフックは、更新された値を取得して私を助けました。私は.scssファイルをインポートし、スタイルとしてそれを格納していますように私はしかし、コードにいくつかの追加の変更をしなければならなかったので、私のように私のクラス名を使用していたというの

import styles from './styles.scss'; 

：

<input className={styles.textInputFocussedValid} placeholder='Label text *' type='text' /> 

として、私の新しいクラス値を使用した状態で保存されています（それはstyles.textInputFocussedValidのようなスタイルにリンクされていないとして）

<input className={this.state.updateClass} placeholder='Label text *' type='text' /> 

は動作しませんでした。

は、私は最終的には、以下のような条件を作成するために、JedWatsonでクラス名を使用：

const updatedClass = classnames(
{ [`${styles.textInputNonFocussedValid}`]: this.props.updateClass === 'textInputNonFocussedValid' }, 
{ [`${styles.textInputFocussedValid}`]: this.props.updateClass === 'textInputFocussedValid' }, 
{ [`${styles.textInputNonFocussedInvalid}`]: this.props.updateClass === 'textInputNonFocussedInvalid' }, 
{ [`${styles.textInputNonFocussedValid}`]: this.props.updateClass === 'textInputNonFocussedValid' }, 
{ [`${styles.textInputFocussedInvalid}`]: this.props.updateClass === 'textInputFocussedInvalid' }, 
     ); 
     return (
      <input id='inputStyleComponents' className={updatedClass} placeholder='Label text *'type='text' /> 
     );