Question

我正在学习React，在我的测试应用程序中，我制作了两组相同的随机彩色阵列，每当我点击“改变颜色”时，它就会改变颜色并改变颜色。按钮。但是我似乎无法让Dom更新我的阵列颜色，即使颜色值也能正确改变。

import React from 'react';
class Card extends React.Component{
    constructor(props){
        super(props);
        const {r,g,b}=this.props.card
        this.state={
            style:{
                width:'100px',
                height:'100px',
                display:'inline-block',
                backgroundColor:`rgb(${r},${g},${b})`
            }
        }
    }
    onClick=()=>{
        const {r,g,b}=this.props.card
        console.log('color values of the card with index',this.props.id ,' is: ', r,g,b)
    }
    render(){
        const {style}=this.state
        return (
            <div style={style}>
                <button onClick={this.onClick}>card test</button>
            </div>
        )
    }
}
export default Card;

这是我的问题的图片

正如您在图片中看到的那样，每次点击时值都会发生变化，但卡片会显示出来。颜色保持不变。但是，如果我将基于类的组件更改为基于非类的组件并将样式设置为render（）而不是构造函数，它将起作用，但我希望有一个类组件，以便我可以将卡片单击到父组件。< / p>

Answer 1

onClick还会触发其他内容吗？否则，请不要看看会改变卡片值的内容，因为onClick只是记录。

假设卡片支柱以某种方式正确更改，我相信您的问题是您的卡片支柱正在更新，但状态是在构造函数中设置的，并且从未更新过。

而不是在状态中设置样式值，我只会改为在渲染中计算样式。

render() {
  const {r,g,b} = this.props.card
  const style = {
    width: '100px',
    height: '100px',
    display: 'inline-block',
    backgroundColor: `rgb(${r},${g},${b})`
  }

  return (
    <div style={style}>
      <button onClick={this.onClick}>card test</button>
    </div>
  )
}

你通常不会保留易于从道具中获取的状态，以避免出现这种情况。

更改的值不会显示在Dom中

1 个答案: