मेरे पास 8 शब्दों की सूची के साथ प्रतिक्रिया-मुई में एक फ्रंट-एंड है और प्रत्येक शब्द का अपना इनपुट उसके इनपुट के आधार पर अपडेट किया गया है और इसे अक्षम भी किया जा सकता है। उदाहरण:

        <TextField required id="standard-basic" disabled={this.state.word1Disabled} label="Word1" value={this.state.word1} onChange={(event) => this.setState({word1:event.target.value.trim()})} />
        <TextField required id="standard-basic" disabled={this.state.word2Disabled} label="Word2" value={this.state.word2} onChange={(event) => this.setState({word2:event.target.value.trim()})} />

उपयोगकर्ता यह तय कर सकता है कि ड्रॉपडाउन मेनू का उपयोग करके 8 में से कौन सा शब्द अक्षम करना है जो निम्नलिखित फ़ंक्शन को लागू करता है:

    const handleWord = event => {

    switch(event.target.value) {
        case "1":
          this.setState({word1Disabled:true,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
            word8Disabled:false})
          break;
        case "2":
            this.setState({word1Disabled:false,word2Disabled:true,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "3":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:true,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "4":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:true,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "5":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:true,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "6":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:true,word7Disabled:false,
                word8Disabled:false})
          break;
        case "7":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:true,
                word8Disabled:false})
          break;
        case "8":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:true})
          break;

      }

     }

जबकि उपरोक्त समाधान मेरी समस्या का समाधान करता है, मुझे लगता है कि यह अच्छा प्रोग्रामिंग अभ्यास नहीं है क्योंकि यह दोहराव से अधिक है। क्या कोई पुष्टि कर सकता है कि मैं सही रास्ते पर हूं?

अब मैं उपयोगकर्ता को ड्रॉपडाउन मेनू का उपयोग करके एक ही समय में दो शब्दों को अक्षम करने की क्षमता देना चाहता हूं, शब्द 1 और 2 कहें। मैं इसे प्राप्त करने के लिए हैंडलवर्ड फ़ंक्शन को कैसे संशोधित कर सकता हूं? मैंने इसके बारे में सोचने की कोशिश की लेकिन जिस तरह से मुझे लगता है कि यह और भी दोहराव होता जा रहा है, अक्षम दो शब्दों में से प्रत्येक के लिए हर संभव मामले को संभालना (8x8 = 64 मामले योग्य)।

वांछित परिणाम यह है कि उपयोगकर्ता उन दो शब्दों को चुनने में सक्षम होगा जिन्हें वे अक्षम करना चाहते हैं और उन टेक्स्टफील्ड को "अक्षम = {सत्य}" संपत्ति प्राप्त होती है। यदि उपयोगकर्ता अपना विचार बदलता है और शब्द बदलना चाहता है, तो पुराना अक्षम टेक्स्टफील्ड फिर से सक्षम हो जाता है।

0
Sophie259 15 अप्रैल 2020, 22:02

1 उत्तर

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

आप अपने 8x8 = 64 मामलों के लिए कोड की निम्न पंक्ति का उपयोग कर सकते हैं :)

this.setState({['word' + event.target.value + 'Disabled']: true});

एकाधिक इनपुट द्वारा अक्षम करने के लिए:

"1,3,5".split(',').map(value => {
            this.setState({['word' + value + 'Disabled']: true});
        });

यहां पूरा उदाहरण दिया गया है:

import React, {Component} from "react";
export class WordsDisable extends Component {
    state = {
            word1Disabled: false,
            word2Disabled: false,
            word3Disabled: false,
            word4Disabled: false,
            word5Disabled: false,
            word6Disabled: false,
            word7Disabled: false,
            word8Disabled: false
        };

    handleWord= (event) => {
        // Setting false for all words
        this.setState({
            word1Disabled: false,
            word2Disabled: false,
            word3Disabled: false,
            word4Disabled: false,
            word5Disabled: false,
            word6Disabled: false,
            word7Disabled: false,
            word8Disabled: false
        });

        this.setState({['word' + event.target.value + 'Disabled']: true});
    };
    render() {
        return (
            <div>
                <ul>
                    <input onChange={this.handleWord}/>
                </ul>
            </div>
        )
    }
}

अंतिम लेकिन कम से कम, आपको सेटस्टेट का उपयोग करके सभी संपत्ति को अपडेट करने की आवश्यकता नहीं है। आप बस अपनी एकल संपत्ति को अपडेट करते हैं और बाकी पिछले मूल्य को बनाए रखेंगे। उदाहरण के लिए:

switch (event.target.value) {
    case "1":
        this.setState({word1Disabled: true});
        break;
    case "2":
        this.setState({word2Disabled: true});
        break;
    case "3":
        this.setState({word3Disabled: true});
        break;
    case "4":
        this.setState({word4Disabled: true});
        break;
}
1
Khabir 15 अप्रैल 2020, 20:15