Question

我对React很新，并尝试使用React。我正在制作一组立方体，当用户点击时，在颜色之间交替。

要了解有关setState的更多信息，我添加了一个输入，以便当用户输入颜色时，立方体的颜色会发生变化。问题是多维数据集的颜色发生了变化，但当我点击多维数据集时，它会回到默认颜色。我希望立方体能够改变用户输入的颜色。

我尝试了什么？我尝试将this.setState({color: 'pink'})中的粉红色更改为setColor（），但它不起作用。我环顾四周，但找不到任何可以回答我问题的内容。

我已经创建了问题here。

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;

Answer 1

它会回到默认的public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case R.id.save: try { FileOutputStream fos = this.openFileOutput("player.ser", Context .MODE_PRIVATE); ObjectOutputStream oos = new ObjectOutputStream(fos); oos.writeObject(drawer); oos.close(); Toast.makeText(getApplicationContext(), "success", Toast.LENGTH_LONG).show(); } catch (IOException e) { e.printStackTrace(); Toast.makeText(getApplicationContext(), "fail io", Toast.LENGTH_LONG).show(); } break; case R.id.load: try { FileInputStream fis = this.openFileInput("player.ser"); ObjectInputStream is = new ObjectInputStream(fis); drawer = (Item) is.readObject(); is.close(); Toast.makeText(getApplicationContext(), "success", Toast.LENGTH_LONG).show(); } catch (IOException e) { e.printStackTrace(); Toast.makeText(getApplicationContext(), "fail io", Toast.LENGTH_LONG).show(); } catch (ClassNotFoundException e) { e.printStackTrace(); Toast.makeText(getApplicationContext(), "no class", Toast.LENGTH_LONG).show(); } break;，因为onClick您手动设置了onClick，而且您不需要计数变量来在colors之间切换。计数状态也未正确使用。您只需要使用函数setState并实现colors之类的

changeColor

<强> Working Demo

检查 When to use functional setState

检查setState doesn't update the state immediately

从用户输入

1 个答案: