मैं सामग्री-यूआई चेकबॉक्स का उपयोग कर रहा हूं, मुझे चेकबॉक्स राज्य को प्रोग्रामेटिक रूप से चेक, अनचेक या अन्य चेकबॉक्स क्लिक के आधार पर बदलने की जरूरत है। चेकबॉक्स की एक सूची हो सकती है जिसे मुझे बदलने की ज़रूरत है, और मैं प्रतिक्रिया में राज्य का उपयोग नहीं करना चाहता हूं।

import React from 'react'
import Checkbox from '@material-ui/core/Checkbox';

export default class CheckboxesTest extends React.Component {
    onChange = (e) => {
        let cbs = document.getElementById("checkboxId").querySelectorAll("input[type='checkbox']");
        for (let i = 0; i > cbs.length; i++)
            cbs[0].checked = true;
    }

    render() {
        return (
            <div>
                <Checkbox
                    defaultChecked
                    onChange={this.onChange}
                />
                <div id="checkboxId">
                    <Checkbox />
                    <Checkbox />
                </div>
            </div>
        )
    }
}

जब मैंने ब्राउज़र डिफ़ॉल्ट चेकबॉक्स का उपयोग किया तो यह काम करता है,

import React from 'react'
import Checkbox from '@material-ui/core/Checkbox';

export default class CheckboxesTest extends React.Component {
    onChange = (event) => {
        let elem = document.getElementById("checkboxId").querySelectorAll("input[type='checkbox']");
        for (let i = 0; i < elem.length; i++) {
            elem[i].indeterminate = false
            elem[i].checked = event.target.checked;
        }
    }

    render() {
        return (
            <div>
                <Checkbox
                    defaultChecked
                    onChange={this.onChange}
                />
                <div id="checkboxId">
                    <input type="checkbox" />
                    <input type="checkbox" />
                </div>
            </div>
        )
    }
}

अग्रिम में धन्यवाद

0
UTTAM KUMAR 7 जुलाई 2020, 14:21

2 जवाब

मुझे यकीन नहीं है कि आप राज्य का उपयोग क्यों नहीं करना चाहेंगे, लेकिन आपका कोड ठीक से काम नहीं कर रहा है क्योंकि SwitchBase घटक को आंतरिक चेकबॉक्स घटक में बदलाव की जानकारी नहीं है।

मूल चेकबॉक्स तत्व को चेक की गई विशेषता के आधार पर आंतरिक रूप से अपडेट किया जा रहा है। लेकिन केवल चेक की गई संपत्ति को सेट करके, कोई परिवर्तन घटना उत्सर्जित नहीं होगी।

आपको एक इवेंट को मैन्युअल रूप से बदलना, लेकिन इसके लिए आपको इसे काम करने के लिए कुछ रिएक्ट लॉजिक को ओवरराइड करने की आवश्यकता है, जिसकी मैं अनुशंसा नहीं करता।

एक अन्य संभावित समाधान एक घटक में चेकबॉक्स को लपेटना होगा जिसमें एक चेकबॉक्स की स्थिति होती है। क्लास कॉम्पोनेन्ट पर setChecked मेथड को डिफाइन करके, आप इस मेथड को कॉल करके चेक्ड स्टेट को बदल सकते हैं।

https://codesandbox.io/s/material-ui-u822z?fontsize=14&hidenavigation=1&theme=dark

0
Christiaan 7 जुलाई 2020, 15:12
टिप्पणी और सुझावों के लिए धन्यवाद, मुझे राज्य नहीं चाहिए, क्योंकि, चेकबॉक्स की संख्या गतिशील है और यह अधिक गहराई हो सकती है, जैसे जब मैं एक चेकबॉक्स पर क्लिक करता हूं, तो यह सभी चेकबॉक्स को आंतरिक गहराई में बदल देता है। प्रत्येक चेकबॉक्स एकाधिक चाइल्ड चेकबॉक्स या पैरेंट चेकबॉक्स का अभिभावक हो सकता है।
 – 
UTTAM KUMAR
8 जुलाई 2020, 10:40
ठीक है, यह कोई समस्या नहीं होनी चाहिए और इसे केवल एक राज्य संपत्ति के साथ हल किया जा सकता है। यदि प्रत्येक चेकबॉक्स में एक विशिष्ट पहचानकर्ता है, तो आप वास्तव में एक ट्री डिक्शनरी बना सकते हैं जैसे: codesandbox.io/s/…
 – 
Christiaan
8 जुलाई 2020, 11:39

आप मध्यवर्ती कस्टम घटक का उपयोग अपेक्षित समाधान प्राप्त कर सकते हैं।

मुख्य घटक की तरह हो:

import React, { Component } from "react";
import { render } from "react-dom";
import Checkbox from "@material-ui/core/Checkbox";
import CheckboxIndependant from "./component/CheckboxIndependant";
import "./style.css";

class App extends Component {

  onChange = e => {
    let elem = document
      .getElementById("checkboxId")
      .querySelectorAll("input[type='checkbox']");
    for (let i = 0; i < elem.length; i++) {
      elem[i].checked = !event.target.checked;
      elem[i].click()
    }
  };

  render() {
    return (
      <div>
        <Checkbox onChange={this.onChange} />
        <hr />
        <div id="checkboxId">
          <CheckboxIndependant />
          <CheckboxIndependant />
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

CheckboxIndependant की परिभाषा है:

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";

class CheckboxIndependant extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
  }

  handleInputChange = event => {
    this.setState({
      checked: event.target.checked
    });
  };

  render() {
    const newProps = Object.assign(
      {
        onChange: this.handleInputChange,
        checked: this.state.checked
      },
      this.props
    );
    return <Checkbox {...newProps} />;
  }
}

export default CheckboxIndependant;

उदाहरण कोड: https://stackblitz.com/edit/react-vuqlsa

0
Sachink 8 जुलाई 2020, 20:53