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

Question

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

我在 addRoomName 函数内部创建了 setState 用于输入房间内的值

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

和另外我创建了setState用于验证条件

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

这可能是问题所在吗？因为似乎 React 甚至不识别验证，而只识别第一个 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

在您的 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 });
}

Answer 2

谢谢大家，现在可以了，我确实希望你们派人有有效的代码，我也改变了这个

 <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 是一个保留字，当我试图解决这个问题时，我没有看到那件重要的事情..谢谢！

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

Input doesn't change color according to the validation (rcc)

validation

state

if-statement

reactjs

arrow-functions