如何解决我怎样才能使React-Bootstrap无线电组成为必需的?
我在应用中使用了一对React-Bootstrap radio buttons。我需要要求用户进行选择。但是,添加required
的效果与在HTML单选输入中的效果不同。
<Form.Check inline label="One" type='radio' required />
<Form.Check inline label="Two" type='radio' required />
如何在此处应用HTML5 required
属性?
解决方法
步骤 1: 设置状态标志,默认为 class DateTransformation() : VisualTransformation {
override fun filter(text: AnnotatedString): TransformedText {
return dateFilter(text)
}
}
fun dateFilter(text: AnnotatedString): TransformedText {
val trimmed = if (text.text.length >= 8) text.text.substring(0..7) else text.text
var out = ""
for (i in trimmed.indices) {
out += trimmed[i]
if (i % 2 == 1 && i < 4) out += "/"
}
val numberOffsetTranslator = object : OffsetMapping {
override fun originalToTransformed(offset: Int): Int {
if (offset <= 1) return offset
if (offset <= 3) return offset +1
if (offset <= 8) return offset +2
return 10
}
override fun transformedToOriginal(offset: Int): Int {
if (offset <=2) return offset
if (offset <=5) return offset -1
if (offset <=10) return offset -2
return 8
}
}
return TransformedText(AnnotatedString(out),numberOffsetTranslator)
}
true
第 2 步:我根据标志有条件地添加 className class HaveAccount extends Component {
state = {
flag: true,};
render() {
const { haveAccount,updateHaveAccount } = this.props;
const handleChange = (e) => {
if (this.state.flag)
this.setState((prevState) => ({ ...prevState,flag: false }));
updateHaveAccount({ value: e.target.value });
};
return (
<div>
<Form className="d-flex flex-column justify-content-center">
<Form.Group as={Row}>
<Col sm={{ span: 7,offset: 5 }}>
<Form.Check
type="radio"
label="YES"
name="haveAccountRadios"
value={true}
id="haveAccountRadios1"
onChange={handleChange}
/>
<Form.Check
type="radio"
label="NOPE"
name="haveAccountRadios"
value={false}
id="haveAccountRadios2"
onChange={handleChange}
/>
</Col>
</Form.Group>
<Form.Group className="d-flex justify-content-center">
<Link
className={`button button-link ${
this.state.flag ? "disabled" : ""
}`}
to="/login"
>
Next
</Link>
</Form.Group>
</Form>
</div>
);
}
}
。标志仅在第一次 disabled
执行时更新。
第 3 步:添加 CSS
handleChange
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。