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

Question

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

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

Answer 1

你的 CSS 状态嵌套得更深一层:

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

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