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

Question

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

现场演示尝试设置无效的日期，然后单击

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

引导按钮上的属性form="myform"作为prop向下传递给按钮组件，react-bootstrap不处理该属性。

另外， button元素的默认类型是submit而对于Bootstrap Button组件，它是button，因此对您不起作用。

您宁愿在引导按钮上指定type="submit"并使用ref而不是直接进行DOM处理

码：

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