为什么属性不适用于 React-Bootstrap Button？答案

【问题标题】：why attribute not working with React-Bootstrap Button?为什么属性不适用于 React-Bootstrap Button？
【发布时间】：2017-07-17 10:25:22
【问题描述】：

我正在尝试为我的输入设置setCustomValidity，但它不适用于 React-Bootstrap Button 组件。它适用于“标准”按钮。在我的应用程序中，form 和 Button 位于不同的组件中。

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

【问题讨论】：

尝试在 Bootstrap 按钮上设置type="submit"
您的 CodePen 工作正常。硬编码的id 值是一个危险信号，您可能应该使用ref，但是...

标签： javascript twitter-bootstrap reactjs react-bootstrap

【解决方案1】：

Bootstrap Button 上的 form="myform" 属性作为 prop 传递给按钮组件，react-bootstrap 不处理。

button 元素的默认类型是 submit 而对于 Bootstrap 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

【讨论】：