改变使用状态或道具从父组件输入元素的输入元素的样式

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构造函数将只运行一次，因此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

检查类名在scss文件。我看不到任何为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' /> 
     );