So erhalten Sie mehrere Kontrollkästchenwerte in React.js

Beim Abrufen mehrerer Kontrollkästchenwerte werden die Werte aller Kontrollkästchen abgerufen, die in einem Formular aktiviert wurden. Dies kann je nach verwendeter Programmiersprache und Framework auf verschiedene Arten erfolgen.

In diesem Tutorial erfahren Sie, wie Sie in Reac.js mehrere Kontrollkästchenwerte abrufen. Um mehrere Kontrollkästchenwerte in React JS zu erhalten, führen wir diese Schritte aus

• Schritt 1: Erstellen Sie eine React JS-App
• Schritt 2: Bootstrap 4 einrichten
• Schritt 3: Erstellen Sie eine Checkbox-Formularkomponente
• Schritt 4: Komponente in App.js hinzufügen

Schritt 1: Erstellen Sie eine React JS-App

In diesem Schritt erstellen wir eine neue Reaktions-App.

npx create-react-app my-react-app

Um die React-App auszuführen, führen Sie den folgenden Befehl auf Ihrem Terminal aus.

npm start

Schritt 2: Bootstrap 4 einrichten

In diesem Schritt installieren wir die Bootstrap 4-Bibliotheken in Ihrer React-App.

npm install bootstrap --save

Fügen Sie der Datei die   Datei  „bootstrap.min.css“src/App.js hinzu  .

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <!-- Code here -->
    </div>
  );
}
 
export default App;

Schritt 3: Erstellen Sie eine Checkbox-Formularkomponente

In diesem Schritt erstellen wir eine Checkbox-Formularkomponente mit dem Namen CheckboxForm.js.

import React from 'react'
class CheckboxForm extends React.Component{

constructor(){
	super();
	this.state = {
		hobbies:[]
	}
	this.handleInputChange = this.handleInputChange.bind(this);
}

handleInputChange(event) {
	const target = event.target;
	var value = target.value;
	if(target.checked){
		this.state.hobbies[value] = value;   
	}else{
		this.state.hobbies.splice(value, 1);
	}
}

submit(){
	console.warn(this.state)
}

render(){
	return(
	<div>
		<div class="row">
			<div class="col-md-6 offset-md-3">
				<br /><br />
				<h3>How To Get Multiple Checkbox Value In React JS</h3><br />
				<div class="form-row">
					<div class="form-group col-md-6">
						<label>Hobbies :</label><br />
						<div class="form-check form-check-inline">
						<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh1" value="1" onChange={this.handleInputChange} />
						<label class="form-check-label" for="inlineCheckboxh1">Cricket</label>
					</div>
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh2" value="2" onChange={this.handleInputChange} />
						<label class="form-check-label" for="inlineCheckboxh2">Reading</label>
					</div>
					<div class="form-check form-check-inline">
						<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh3" value="3" onChange={this.handleInputChange} />
						<label class="form-check-label" for="inlineCheckboxh3">Cooking</label>
					</div>
				</div>
			</div>
			<div class="form-row">
				<div class="col-md-12 text-center">
					<button type="submit" class="btn btn-primary" onClick={()=>this.submit()}>Submit</button>
				</div>
			</div>
		</div>
	</div>
	</div>
	)  
	}
}
export default CheckboxForm;

Schritt 4: Komponente in App.js hinzufügen

In diesem Schritt müssen wir die   Datei  CheckboxForm.jssrc/App.js in  der Datei hinzufügen:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import CheckboxForm from './CheckboxForm'
function App() {  
return (  
<div className="App">  
<CheckboxForm/>  
</div>  
);  
}  
export default App;

In diesem Tutorial haben Sie gelernt, wie Sie in React JS mehrere Kontrollkästchenwerte erhalten