Question

我尝试为我的输入设置setCustomValidity，但它没有使用React-Bootstrap Button组件。它可以和＃34;标准＆＃34;按钮。在我的应用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>
    );
  }
}

Answer 1

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

button元素的默认类型为submit，而 Bootstrap Button 组件则为按钮，因此它不适用于您。

您宁愿在bootstrap按钮上指定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

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

1 个答案: