Javascript 从用户输入更改设置状态

我对React和React的实验相当陌生。我正在制作一组立方体，当用户单击时，它们会在颜色之间交替

为了进一步了解setState，我添加了一个输入，这样当用户输入颜色时，立方体的颜色就会改变。问题是立方体的颜色改变了，但是当我点击立方体时，它会回到默认的颜色。我希望立方体改变用户输入的颜色

我试过什么？ 我试着在这个.setState{color:'pink'}中将粉红色更改为setColor，但它不起作用。我环顾四周，但找不到任何能回答我问题的东西

我创造了这个问题

---

它返回到默认的onClick，因为onClick是手动设置颜色的，也不需要使用计数变量在颜色之间切换。计数状态也未正确使用。您所需要的只是使用函数setState并实现像这样的changeColor

检查

---

检查

不确定问题的原因是什么，但以下是我的解决方案：。祝你一切顺利✌️不确定这是否能解决问题，但我会尝试传递一个函数作为separate的第一个参数。看看啊，等等，问题是changeColor函数。这些值是基于状态设置的字符串而不是动态变量。谢谢！你建议我怎么做计数状态？使用函数设置状态？为什么要计算状态？我最初开始这个项目是为了做tic-tac-toe，但太难了，所以我偏离了方向。在每一次奇数点击中，我想要一个十字符号，在每一次偶数点击中，我想要一个复选标记。所以我想计算点击次数。当然，你也必须使用函数setState进行计数。检查我的答案中关于何时使用功能设置状态的链接

class TicTacToe extends Component {

  state = {
    color: 'black',
    colors: 'white',
    count: 0
  }

  changeColor(c){
    this.setState({ count: this.state.count + 1 })
    if(this.state.count % 2 === 0){
      this.setState({color: 'pink'})
      this.setState({colors: 'grey'})
    } else if (this.state.count % 2 !== 0){
      this.setState({color: 'grey'})
      this.setState({colors: 'pink'})
    }
  }

  setColor(color){
    return this.setState({color: color})
  }

  setColors(color){
    this.setState({colors: color})
  }

  render(){
    return (
      <div className="main">
          <div className="inputFields">
              <span> Color One:
                <input value={this.state.color}
                       onChange={(e)=> this.setColor(e.target.value)} /> </span>
              <br /><br />

              <span> Color Two:
                <input value={this.state.colors}
                        onChange={(e)=> this.setColors(e.target.value)} /> </span>
          </div>
          <div onClick= {(c)=> this.changeColor()}>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <br />
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <br />
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
          </div>
            <span> This is the count: {this.state.count} </span>
      </div>
    )
  }
}

export default TicTacToe;

changeColor(c){
    this.setState(prevState => ({
      color: prevState.colors,
      colors: prevState.color
    }))
  }