javascript - ReactJS-为什么我的输入栏的样式没有根据setState改变？

我有一个带有输入字段的表单，该表单要根据用户输入的有效性进行更改，但无法正常工作。我忽略了什么？请参见下面的代码。控制台日志都按需要命中了...但未更改

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)
}

最佳答案

处于状态的CSS更深一层嵌套：

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

还要注意，我建议向您的元素中添加一个类，并有条件地更改类，而不是使用状态来管理样式。这样，通过样式和组件的分离可以使它更清洁。

关于javascript - ReactJS-为什么我的输入栏的样式没有根据setState改变？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48709934/