J'ai les données suivantes ci-dessous.anTime que je planais dans l'élément de formulaire et j'essaie de cliquer sur le bouton radio pour la prochaine question La première question qui est vérifiée devient décocheck et vice-versa si je retourne au premier question. et j'aimerais avoir les valeurs des deux questions qui répondent.
4 Réponses :
Vous devez vérifier si l'option est sélectionnée ou non pour chaque question.
<input type="radio" name="chosen" value="A" onChange={this.handleChange}
checked={set.chosen === set.A} />{set.A}
<input type="radio" name="chosen" value="B" onChange={this.handleChange}
checked={set.chosen === set.B} />{set.B}
<input type="radio" name="chosen" value="C" onChange={this.handleChange}
checked={set.chosen === set.C} />{set.C}
<input type="radio" name="chosen" value="D" onChange={this.handleChange}
checked={set.chosen === set.D} />{set.D}
Le problème est avec le nom ... Au lieu de
<input type="radio" name={set.id} value="A" onChange={this.handleChange} />
Travailler mais comment puis-je obtenir la valeur des deux entrées vérifiées qu'il ne renvoie qu'un seul
Les entrées de radio code> sont regroupées par votre attribut p> nom code>, par exemple:
<p>Select ur favorite language:</p>
<div>
<input type="radio" id="js" name="fav-language" value="js"
checked>
<label for="js">JavaScript</label>
</div>
<div>
<input type="radio" id="php" name="fav-language" value="php">
<label for="php">PHP</label>
</div>
<div>
<input type="radio" id="python" name="fav-language" value="python">
<label for="python">Python</label>
</div>
<p>Select ur favorite space tab:</p>
<div>
<input type="radio" id="tab-0" name="fav-space" value="0"
checked>
<label for="tab-0">0 spaces</label>
</div>
<div>
<input type="radio" id="php" name="fav-space" value="php">
<label for="tab-2">2 spaces</label>
</div>
<div>
<input type="radio" id="python" name="fav-space" value="python">
<label for="tab-4">4 spaces</label>
</div>
vous oubliez que je suis en boucle à travers un tableau A dans un élément de forme
Je n'oublie pas ce frère, je ne supprime pas la méthode carte de votre tableau, Voici
Je crois que c'est ce que vous êtes après ...
Je change de la façon dont vous gérez votre état et d'autres petites choses ... p> blockQuote>
Voir le problème est que votre état est
{choisi: {choisi: Réponse} code>, comme vous pouvez le constater que l'État ne stocke qu'une seule réponse, et elle ne sait pas quelle définition est définie.Votre état devrait être comme: p>
{choisi: {choisi: {question1: réponse1, question2: réponse2 ...}} code> p>maintenant Implémentons ceci .. p>
L'événement HandLechange devrait être: p>
xxx pré> Nous avons maintenant couvert la partie principale .. p>
mise à jour Votre élément d'entrée: p>
xxx pré> avec ceci: p>
xxx pré> Complete Code Comming ... P> blockQuote>
ou vous pouvez suivre cette méthode h1>
Ça fonctionnera très bien, mais de nombreuses modifications mineures ... p>
function RadioInput(props){ return( <> <input type="radio" name={props.set.id} value={props.value} check={props.value == props.set.chosen} onChange={props.handleChange}/> {props.set.choices[props.value]} </> ) } class App extends Component { constructor(props) { super(props) this.state = { questions : [ { "id": 1, "question": "what is the name of a boy", "choices":{ "A": "tope", "B": "tosin", "C": "tayo", "D": "tolu", }, "answer" : "A", "chosen": "" }, { "id": 2, "question": "what is the name of a girl", "choices":{ "A": "kaneyi", "B": "maneyi", "C": "tayosa", "D": "toluli", }, "answer" : "A", "chosen": "" }, ] } } handleChange = setId => { return (event)=>{ console.log(event.target.value); this.setState({ questions: this.state.questions.map((question)=>{ if(question.id == setId){ question.chosen = event.target.value return question }else{ return question } }) }); } } render() { return ( <form> { this.state.questions.map((set) => { return( <div key={set.id}> <p>{set.question} ?</p> <RadioInput handleChange={this.handleChange(set.id).bind(this)} set={set} value={"A"} /> <RadioInput handleChange={this.handleChange(set.id).bind(this)} set={set} value={"B"} /> <RadioInput handleChange={this.handleChange(set.id).bind(this)} set={set} value={"C"} /> <RadioInput handleChange={this.handleChange(set.id).bind(this)} set={set} value={"D"} /> </div> ) }) } <hr/> <div> State: {JSON.stringify(this.state.questions)} </div> </form> ) } } render(<App />, document.getElementById('root'));
@Sankap Bhamare Comment puis-je obtenir les valeurs de chaque élément d'entrée lors de la soumission?
Olatunde Temitope, ils sont automatiquement stockés dans le ceci.state.Questions.Costions , j'ai fait le code afin qu'il soit directement stocké dans l'état du formulaire. Vous pouvez vous voir un champ choisi pour chaque question, j'ai mis à jour la réponse sélectionnée par l'utilisateur directement à l'état.
Pouvez-vous être plus clair? Vous voulez que les valeurs soient conservées même lorsque vous naviguez dans les pages?
ce que je veux, c'est quand je fais une console.log, je devrais obtenir les valeurs pour les deux entrées vérifiées