ReactJS - 为什么我的输入栏的样式不会根据 setState 改变？答案

【问题标题】：ReactJS - Why is the style of my input bar not changing based off of a setState?ReactJS - 为什么我的输入栏的样式不会根据 setState 改变？
【发布时间】：2018-07-20 11:11:11
【问题描述】：

我有一个带有输入字段的表单，我试图根据用户输入的有效性进行更改，但它不起作用。我忽略了什么？请看下面的代码。控制台日志都按要求进行...但没有更改

export default class GeneralInput extends React.Component {
constructor(props) {
super(props)

this.state = {
  placeholderCSS: this.props.styles.placeholder || {},
  inputCSS: this.props.styles.input || {}
}
}


 onPlaceholderClick = (event) => {
event.currentTarget.parentElement.querySelector('input').focus()

}

onInputBlur = (event) => {
console.log('onblur')
let inputInfo = event.target
let inputVal = event.target.value,
    { styles } = this.props,
    fontSize = styles.placeholder.fontSize || 10,
    top = styles.placeholder.top || 4
    console.log(inputInfo.id.toString())
    console.log(inputVal.split('').length)


if(inputInfo.id == 'zip' && inputVal.split('').length < 4){
  console.log('ziphit')
  return this.setState(state =>({
      ...state.inputCSS,
      border: '3px solid red'
    }))


} else if (inputInfo.id == 'zip' && inputVal.split('').length >= 4){
      return this.setState(state => ({
          ...state.inputCSS,
          border: '1px solid green'
        }))
    }
    console.log(this.state.inputCSS)
}

【问题讨论】：

旁白：setStyle 是一个异步操作。您不会看到状态 using console like that 的变化

标签： javascript reactjs

【解决方案1】：

你的 CSS 嵌套更深一层：

this.setState(prevState => ({
  inputCSS: {
    ...prevState.inputCSS
    border: '3px solid red'
  }
}));

另外请注意，我建议向您的元素添加一个类并有条件地更改类，而不是使用状态管理样式。这样一来，样式和组件的分离就更简洁了。

【讨论】：