为什么属性不能与React-Bootstrap按钮一起使用？

问题描述：

我想为我的输入设置setCustomValidity，但它不适用于React-Bootstrap Button组件。 “标准”按钮可以正常工作。在我的应用程序form和Button是在不同的组件。为什么属性不能与React-Bootstrap按钮一起使用？

live demo尝试设置无效的日期，点击

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> 
    ); 
    } 
}

尝试设置'类型= “提交” '在引导按钮上 –

您的CodePen工作得很好。硬编码的'id'值是一个红旗，你应该使用['ref']（https://facebook.github.io/react/docs/refs-and-the-dom.html），但.. 。 –

答

属性form="myform"在引导按钮向下传递的按钮组件作为不反应的自举处理的道具。

同样对于一个button元素的默认类型是submit而对于Bootstrap Button部件是按钮，因此它不适合你。

你宁愿指定的引导按钮type="submit"做出的，而不是直接的DOM处理

代码ref使用：

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> 
    ); 
    } 
}

CODEPEN

为什么属性不能与React-Bootstrap按钮一起使用？

相关推荐