warum Attribut funktioniert nicht mit React-Bootstrap Button?

Question

Ich versuche setCustomValidity für meine Eingabe zu setzen, aber es funktioniert nicht mit React-Bootstrap Button-Komponente. Es funktioniert gut mit "Standard" -Taste. In meiner App sind form und Button in verschiedenen Komponenten.

live demo versuchen ungültiges Datum ein und klicken Sie

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

Answer 1

Das Attribut form="myform" auf der Bootstrap-Taste wird als Stütze auf die Schaltfläche Komponente weitergegeben, die durch Reaktion-Bootstrap nicht behandelt wird.

Auch der Standardtyp für ein button Element ist submit während für die es Knopf Bootstrap Button Komponente ist und daher tut es für Sie arbeiten.

Sie würden lieber type="submit" auf Bootstrap-Taste festlegen und die Verwendung von ref anstelle direkter DOM machen Handhabung

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

CODEPEN