Question

所以，使用反应，我正在检查我的道具上的点击和应用，或不是，基于这些道具的我的按钮的类。问题是我需要在渲染时进行验证。我正在思考一个在render上运行的方法（selectedThumbnails？），但我不太清楚如何处理验证。

这是我的组件：

class Thumbnail extends Component {
    constructor(props){
        super(props);
    }

    selectedThumbnails = () => {
        console.log(this.props.selectedThumbnails()
    }

    render() {

        return (

            this.selectedThumbnails(),

            <div onClick={() => this.props.escolheTextura(this.props.textures)}
                 className={this.props.thumbnailsAtives.some(thumbnail => thumbnail === this.props.textures) ? "button is-primary thumbnail" : "button thumbnail"}>
                <Tooltip title={this.props.textureName}>
                <span>
                    <figure className={"image is-32x32"}>
                        <img src={this.props.textures.urlImage}/>
                    </figure>
                </span>
                </Tooltip>
            </div>
        )
    }
};

如果数组thumbnailsAtivas中的某些按钮与“this.props.textures”中的某些按钮一样，我的onclick会将类“按钮是主缩略图”应用于按钮/按钮。我还需要在渲染上检查这个，比如在onLoad上，但是我不知道如何用onLoad方法应用一个类。

Answer 1

class Thumbnail extends Component {
    constructor(props){
        super(props);
        this.state={
          selectedThumbnail:null
        }
    }

    thumblick = (thumb) => {
     this.setState({selectedThumbnail:thumb })
    }


    render() {

        return (


            <div onClick={() => this.thumblick(this.props.textures) }
                 className={this.state.selectedThumbnail === this.props.textures) ? "button is-primary thumbnail" : "button thumbnail"}>
                <Tooltip title={this.props.textureName}>
                <span>
                    <figure className={"image is-32x32"}>
                        <img src={this.props.textures.urlImage}/>
                    </figure>
                </span>
                </Tooltip>
            </div>
        )
    }
   };

首先定义将保存所选图像的空状态变量。单击时应将状态设置为当前选定的缩略图图像。更改状态会导致重新渲染，此时它将通过每个拇指图像与存储在状态中的所选拇指图像进行比较。那个时候它会将类应用于按钮

基于渲染上的道具应用类

1 个答案: