输入不会根据验证(rcc)更改颜色。

Question

我想验证用户在输入中写入的值。浏览器工作，通过单击button创建一个新的房间，但是input不会根据我设置的验证更改颜色，为什么？

在addRoomName函数中，我为房间输入中的值创建了setState

addRoomName=(e)=> {
this.setState({ room: e.target.value })

另外，i为验证创建了具有以下条件的setState

this.setState({ addRoomName: e.target.value });
if (e.target.value.length >= 6){
  this.setState({roomNameInputColor:'green'})
} else {
  this.setState({roomNameInputColor:'red'})
}

这可能是问题所在吗？因为反应似乎甚至不承认验证，而仅仅是第一个setState (带来在房间输入中写入的值)

那么为什么输入不改变颜色呢？我分享了所有的密码谢谢！

App.js

import React, { Component } from 'react'
import './App.css';
import Addroom from './components/Addroom.js'
import Room from './components/Room.js'

export default class App extends Component {
  state = {
    roomsList:[{room:'',color:''}],
  }

  create = (r, c) => {
    this.setState({ roomsList: [...this.state.roomsList, { room: r, color: c }] })
  } 

  render() {
    return (
      <div>
        <h1>My Smart House</h1>
        {this.state.roomsList.map((element) => {
          return <Room r={element.room} c={element.color} />
        })}

        <Addroom add={this.create}/>
        
      </div>
    )
  }
}

Addroom.js

import React, { Component } from 'react'

export default class Addroom extends Component {
  constructor(props) {
    super(props)
    this.state = {
      roomNameInputColor:'white',
    }
  }

  addRoomName = (e) => {
    this.setState({ room: e.target.value })
    this.setState({ addRoomName: e.target.value });

    if (e.target.value.length >= 6) {
      this.setState({ roomNameInputColor: 'green' })
    } else {
      this.setState({ roomNameInputColor: 'red' })
    }
  }

  addColor = (e) => {
    this.setState({ color: e.target.value })
  }

  createRoom = () => {
    this.props.add(this.state.room, this.state.color);
  }

  render () {
    return (
      <div>
        <input onChange={this.addRoomName} style={{ backgroundInputColor: this.state.roomNameInputColor }} placeholder='Name Your Room'/>
        <br/>
        <input onChange={this.addColor} placeholder='Whats The Room Color?'/>
        <br/>
        <button onClick={this.createRoom}>Create</button>
      </div>
    )
  }
}

Room.js

import React, { Component } from 'react'

export default class Room extends Component {
  constructor(props) {
    super(props)
    
    this.state = {}
  }
    
  render() {
    return (
      <div>
        <h1>Room: {this.props.r} </h1>
        <h3>Color: {this.props.c} </h3>
      </div>
    )
  }
}

Answer 1

谢谢大家，现在起作用了，我确实喜欢你们派人来有有效的代码，而且我也改变了这个

 <input onChange={this.addRoomName} style={{backgroundInputColor:this.state.roomNameInputColor}} placeholder='Name Your Room'/><br/>

到这个

 <input onChange={this.addRoomName} style={{backgroundColor:this.state.roomNameInputColor}} placeholder='Name Your Room'/><br/>

因为backgroundColor是一个保留词，当我试图解决这个问题时，我没有看到那么重要的事情。谢谢!

Answer 2

在您的addRoomName函数中，您将连续执行多个setState，这通常是状态混淆的一个来源(您可能在这里遇到了这种情况)。

更愿意在函数中调用setState()方法，如下所示：

addRoomName = (e) => {
  const room = e.target.value;

  let roomNameInputColor = '';
  if (room.length >= 6) {
    roomNameInputColor = 'green';
  } else {
    roomNameInputColor = 'red';
  }

  this.setState({ room, addRoomName: room, roomNameInputColor });
}