我想列出四个问题。对于每个问题，您只能回答是或否。问题是，尽管我使用了单选输入，但您仍然可以在每个问题上选择是和否。
<ul>
<li>Question 1 <form><class="right"> <input type="radio" name="1yes"/>YES<input type="radio" name="1no"/>NO</form></li>
<li>Question 2 <form><class="right"> <input type="radio" name="2yes" />YES<input type="radio" name="2no" />NO</form></li>
<li>Question 3 <form><class="right"> <input type="radio" name="3yes" />YES<input type="radio" name="3no" />NO</form></li>
<li>Question 4 <form><class="right"> <input type="radio" name="4yes" />YES<input type="radio" name="4no" />NO</form></li>
</ul>
答案 0 :(得分：0)
这是因为您的广播名称不同，如果您的名称不同，则html不会将广播视为一对广播，因此允许您选择两个选项。
解决此问题的一种方法是做到这一点，
<li>Question 1 <form><class="right"> <input type="radio" name="1"/>
<label for="1yes">YES</label>
<input type="radio" name="1"/>
<label for="1no">NO</label>
</form></li>
<li>Question 2 <form><class="right"> <input type="radio" name="2"/>
<label for="2yes">YES</label>
<input type="radio" name="2"/>
<label for="2no">NO</label>
</form></li>
<li>Question 3 <form><class="right"> <input type="radio" name="3"/>
<label for="3yes">YES</label>
<input type="radio" name="3"/>
<label for="3no">NO</label>
</form></li>
<li>Question 4 <form><class="right"> <input type="radio" name="4"/>
<label for="4yes">YES</label>
<input type="radio" name="4"/>
<label for="4no">NO</label>
</form></li>
通过添加标签，您可以配对收音机，同时仍然可以唯一标识用户选择的选项。
让我知道是否需要更多说明！希望这对您有所帮助，以下是Codepen链接，供您观看实时演示：https://codepen.io/designkenal/pen/OdQQmB
答案 1 :(得分：0)
在每个单选按钮中添加import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom";
import * as AWS from 'aws-sdk/global';
import { AuthenticationDetails, CognitoUserPool, CognitoUserAttribute, CognitoUser } from 'amazon-cognito-identity-js';
import PropTypes from 'prop-types'
import '../../stylesheets/Authentication.css'
export default class CognitoIdentitySignIn extends Component {
constructor(props) {
super(props);
this.state = {
password: "",
email: "",
code: "",
submissionAnnouncement: "",
readyForCode: false
};
this.handleChangeEmail = this.handleChangeEmail.bind(this);
this.handleChangePassword = this.handleChangePassword.bind(this);
this.handleChangeCode = this.handleChangeCode.bind(this);
this.submitCredentials = this.submitCredentials.bind(this);
}
handleChangeEmail(event) {
this.setState({email: event.target.value});
}
handleChangePassword(event) {
this.setState({password: event.target.value});
}
handleChangeCode(event) {
this.setState({code: event.target.value});
}
submitCredentials(event) {
this.signIn(this, this.state.email, this.state.password);
}
signIn(context, email, password) {
var authenticationData = {
Username : email,
Password : password
};
var authenticationDetails = new AuthenticationDetails(authenticationData);
var poolData = {
UserPoolId: 'us-west-2_xxxxxxxx',
ClientId: 'XXXXXXXXXXXXXXXXXXXXXX',
};
var userPool = new CognitoUserPool(poolData);
var userData = {
Username : email,
Pool : userPool
};
var cognitoUser = new CognitoUser(userData);
console.log(authenticationDetails);
console.log(cognitoUser);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (session) {
var accessToken = session.getAccessToken().getJwtToken();
AWS.config.region = 'us-west-2';
// Change the key below according to the specific region your user pool is in.
var Logins = {}
Logins[`cognito-idp.${AWS.config.region}.amazonaws.com/${poolData.UserPoolId}`] = accessToken;
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId : 'us-west-2:XXXXXXX-XXXX-XXXXXXXX',
Logins : Logins
});
//refreshes credentials using AWS.CognitoIdentity.getCredentialsForIdentity()
AWS.config.credentials.refresh((error) => {
if (error) {
alert('onSuccess:\n' + JSON.stringify(error));
context.setState({
submissionAnnouncement: error.message,
readyForCode: false
})
console.error(error);
} else {
// Instantiate aws sdk service objects now that the credentials have been updated.
// example: var s3 = new AWS.S3();
context.setState({
submissionAnnouncement: "SUCCESS",
readyForCode: true
});
console.log(session);
var cognitoUser = session.user;
}
});
},
onFailure: function(err) {
alert('onFailure:\n' + JSON.stringify(err));
if (err.message === "Missing required parameter SMS_MFA_CODE") {
context.setState({
submissionAnnouncement: err.message,
readyForCode: true
})
} else {
context.setState({
submissionAnnouncement: err.message
})
}
},
mfaRequired: function(codeDeliveryDetails) {
// MFA is required to complete user authentication.
// Get the code from user and call
console.log(codeDeliveryDetails)
cognitoUser.sendMFACode(context.state.code, this)
}
// ,
// newPasswordRequired: function(userAttributes, requiredAttributes) {
// not actually doing anything with this
// }
});
}
render() {
return (
<div className='SignIn'>
<div className='sign-in-input-box'>
<label>
<p>Email</p>
<input className='sign-in-email-input' value={this.state.email} onChange={this.handleChangeEmail} type='text' />
</label>
</div>
<div className='sign-in-input-box'>
<label>
<p>Password</p>
<input className='sign-in-password-input' value={this.state.password} onChange={this.handleChangePassword} type='text' />
</label>
</div>
<div className="click-text" onClick={this.submitCredentials}> SIGN IN </div>
{(this.state.submissionAnnouncement === "" ? null : <div><span>{this.state.submissionAnnouncement}</span></div>)}
{(this.state.readyForCode) ?
<div className='sign-in-input-box'>
<label>
<p>Password</p>
<input className='sign-in-code-input' value={this.state.code} onChange={this.handleChangeCode} type='text' />
</label>
</div>:
null}
</div>
)
}
}
CognitoIdentitySignIn.propTypes = {
}
。
name="yes_no"