상태 또는 소품을 사용하여 상위 구성 요소에서 하위 구성 요소의 입력 요소 스타일 지정을 변경하십시오.

Question

새로운 구성 요소를 하위 클래스로 전달하여 하위 구성 요소 (UpdateInputBox)의 입력 요소에 대한 테두리 상자를 업데이트 할 수있는 방법을 살펴 보았습니다. 부모 구성 요소 (TextInput)에서 prop. 입력 요소를 검사하면 새 클래스가 입력 요소에 추가되는 것을 볼 수 있지만 스타일은 업데이트되지 않습니다.

내 자식 구성 요소가 소품 변경으로 렌더링되지 않을 수 있으므로이 느낌이 들었습니다. 아래

코드 :

JSX가 scss 파일의 클래스 명을 확인

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 생성자는 한 번만 실행되므로 UpdateInputBox에 대한 상태는 한 번만 설정됩니다. 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

파일. 클래스 textInputNonFocussed에 대해 정의 된 규칙이 없습니다. 적용하려는 스타일로이 클래스에 대한 규칙을 정의 해보십시오.

예 : 당신은 클래스가 추가되었는지 언급 한 바와 같이

input.textInputNonFocussed { 
    color: gray; 
} 

이 문제를 해결해야한다.

Answer 3

는 @Panther :

반작용 라이프 사이클 후크 업데이트 된 값을 받고 저를 도왔다. 나는 .scss 파일을 가져과 스타일로 저장하고 나는 그래도 코드에 몇 가지 추가 변경했기 때문에 나는 나의 클래스 이름을 사용했다 그

import styles from './styles.scss'; 

:

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

로 나의 새로운 클래스의 값을 사용하여 상태에 저장됩니다

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

작동하지 않았다 (이 styles.textInputFocussedValid 같은 스타일에 연결되지 않는).

나는 결국 아래와 같은 조건을 만들 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' /> 
     );