मैंने चेकबॉक्स की एक सूची प्रस्तुत की है और मैं एक ऑनचेंज सेट करने का प्रयास कर रहा हूं जो चयनित इनपुट को ट्रैक करता है और मान को true में बदल देता है। लेकिन मैं एक त्रुटि संदेश प्राप्त करता रहता हूं और एक अद्वितीय key की आवश्यकता के साथ चेतावनी भी देता हूं, भले ही मैं index पास कर रहा हूं।
यह CodeSandbox है
कृपया इस पूर्ण कोड की जाँच करें: -
import React from "react";
import "./styles.css";
class App extends React.Component {
state = {
checkboxes: [
{ name: "Check 1", value: false },
{ name: "Check 2", value: false },
{ name: "Check 3", value: false }
]
};
checkboxStateHandler = (event, idx) => {
const { checkbox } = this.state;
checkbox.checkboxes[idx] = event.target.checked;
this.setState({
checkbox
});
};
renderCheckboxes = () => {
return this.state.checkboxes.map((cb, index) => (
<label>
{cb.name}
<input
type="checkbox"
key={index}
checked={cb.value}
onChange={this.checkboxStateHandler}
/>
</label>
));
};
render() {
return <div>{this.renderCheckboxes()}</div>;
}
}
export default App;
किसी भी तरह की सहायता को आभार समझेंगे। धन्यवाद :)
2 जवाब
यह आपके काम आएगा:
import React from "react";
import "./styles.css";
class App extends React.Component {
state = {
checkboxes: [
{ name: "Check 1", value: false },
{ name: "Check 2", value: false },
{ name: "Check 3", value: false }
]
};
checkboxStateHandler = (event, idx) => {
const { checkboxes } = this.state;
checkboxes[idx] = {
...checkboxes[idx],
value: event.target.checked,
}
this.setState({
checkboxes
});
};
renderCheckboxes = () => {
return this.state.checkboxes.map((cb, index) => (
<label>
{cb.name}
<input
type="checkbox"
key={index}
checked={cb.value}
onChange={e => this.checkboxStateHandler(e, index)}
/>
</label>
));
};
render() {
return <div>{this.renderCheckboxes()}</div>;
}
}
export default App;
मान बदलने के लिए आपको घटना और अनुक्रमणिका को विधि में भेजना होगा, checkboxStateHandler को भी थोड़े बदलाव की आवश्यकता है।
map पद्धति के अंतर्गत कुछ परिवर्तन करने की आवश्यकता है,
-> मानचित्र विधि के तहत तत्काल माता-पिता को कुंजी असाइन करें और आपके मामले में यह label है
<label key={index}>
....
</label>
-> फिर आपको onChange मान को संशोधित करना होगा जैसे,
<input
type="checkbox"
checked={cb.value}
onChange={(e) => this.checkboxStateHandler(e,index)}
/>
यहां घटना और अनुक्रमणिका को तर्क के रूप में पारित करने की आवश्यकता है।
-> फिर checkboxStateHandler फ़ंक्शन में पैरामीटर प्राप्त करें और event.target.checked मान को checkboxes[idx].value पर असाइन करें
checkboxStateHandler = (event, idx) => {
const { checkboxes } = this.state;
checkboxes[idx].value = event.target.checked;
this.setState({
checkboxes
});
};
उपरोक्त कोड सभी चेतावनियों और त्रुटियों से छुटकारा दिलाएगा।