मैं अपने सामग्री-यूआई बटन के काम के लिए संपत्ति [अक्षम] नहीं बना सकता।

प्रॉप्स मूल घटक से आ रहे हैं, यह मुख्य रूप से तार हैं। डेक कार्ड की एक सरणी है।

यहाँ मेरा कोड है:

import React from "react";
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";

export default class Card extends React.Component {
  state = {...};

  addToDeckClick = (event) => {
    event.stopPropagation();
    this.addToDeck();
    this.toggleShowDescription();
  };

  isCardInDeck = () => {
    return this.props.deck.some(
      (card) => card.translationKey === this.props.card.translationKey
    );
  };

  addToDeck = () => {
    if (!this.isCardInDeck()) {
      this.props.deck.push(this.props.card);
    }
  };

  isAddButtonDisabled = () => {
    return !this.isCardInDeck();
  };

  render() {
    return (
          ...
          <Button
            disabled={this.isAddButtonDisabled()}
            className="addDeck"
            variant="contained"
            color="primary"
            onClick={this.addToDeckClick}
            startIcon={<AddIcon />}
          >
            Add to deck
          </Button>
          ...              
     );
  }
}

मैंने कई वाक्यविन्यासों की कोशिश की:

disabled={this.isAddButtonDisabled}
disabled={this.isAddButtonDisabled()}
disabled={() => this.isAddButtonDisabled()}

लेकिन यह काम नहीं कर सकता। कोई विचार ?...

0
AnthonyDa 19 अक्टूबर 2020, 19:08

1 उत्तर

सबसे बढ़िया उत्तर

जब आप डेक में जोड़ते हैं तो घटक प्रस्तुत नहीं करता है।

this.setState({showDescription: true})

और राज्य को अक्षम तर्क में भी जोड़ें:

<Button
    disabled={this.isCardInDeck() && this.state.showDescription}

मैं अनुशंसा करता हूं कि आप अपने कार्ड को एक साधारण घटक बनाएं, जिसमें कोई भी राज्य केवल प्रदर्शन तर्क प्रदान करने वाला नहीं है। अपने राज्य को कार्ड रखने वाले मूल घटक में ले जाएं।

class CardHolder extends React.Component {
    state = {
        userDeck: [],
        cards: [],
        showCardId: null
    };

    addToDeck = (cardId)=>{
        this.setState({
            showCardId: cardId,
            userDeck: [...this.state.userDeck, cardId]
        })
    }
    redner(){

        return this.state.cards.map(card=>{

            return <Card 
                onAddToDeck={this.addToDeck}
                disabled={this.state.userDeck.includes(card.id)}
                title={card.title}
            />
        })
    }
}

function Card(props){
    return (
        <div>
            <Button
                disabled={props.disabled}
                className="addDeck"
                variant="contained"
                color="primary"
                onClick={props.onAddToDeck}
                startIcon={<AddIcon />}
            >
                Add to deck
        </Button>
            <div onClick={props.onSelectCard}>
                {props.title}
                {props.icon}
            </div>
        </div>
    );
}
0
Israel Kouperman 19 अक्टूबर 2020, 19:28