[英]why attribute not working with React-Bootstrap Button?
I'm trying to set setCustomValidity
for my input but it's not working with React-Bootstrap Button component. 我正在尝试为我的输入设置
setCustomValidity
,但是它不能与React-Bootstrap Button组件一起使用。 It's works fine with "standard" button. 使用“标准”按钮可以正常工作。 In my app
form
and Button
are in diffrent components. 在我的应用程序
form
和Button
是不同的组件中。
live demo try set invalid date and click 现场演示尝试设置无效的日期,然后单击
let { Button } = ReactBootstrap;
class MyComponent extends React.Component {
formValidation() {
let inp = document.getElementById("input");
inp.setCustomValidity("test");
}
render() {
return (
<div>
<form id="myform">
<input id="input"
type="datetime-local"
/>
</form>
<button form="myform" onClick={this.formValidation}>Click </button>
<Button form="myform" onClick={this.formValidation}>React-Bootstrap btn</Button>
</div>
);
}
}
The attribute form="myform"
on the Bootstrap Button is passed down to the button component as a prop which is not handled by react-bootstrap. 引导按钮上的属性
form="myform"
作为prop向下传递给按钮组件,react-bootstrap不处理该属性。
Also the default type for a button
element is submit
whereas for the Bootstrap Button component it is button and hence it doesnt work for you. 另外,
button
元素的默认类型是submit
而对于Bootstrap Button组件,它是button,因此对您不起作用。
You would rather specify type="submit"
on bootstrap button and make use of ref
instead of direct DOM handling 您宁愿在引导按钮上指定
type="submit"
并使用ref
而不是直接进行DOM处理
Code: 码:
class MyComponent extends React.Component {
constructor(){
super();
this.formValidation = this.formValidation.bind(this);
}
formValidation (){
this.input.setCustomValidity("test");
}
render() {
return (
<div>
<form id="myform">
<input ref={ref =>this.input=ref}
type="datetime-local"
/>
</form>
<button form="myform" onClick={this.formValidation}>Click </button>
<Button type="submit" form="myform" onClick={this.formValidation}>React-Bootstrap btn</Button>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.