如何将名称属性添加到输入？

Question

检查下面的 React 代码时，无法在输入中看到名称属性。我正在使用 react-bootstrap-floating-label 包进行浮动输入。

<Form onSubmit={this.handleSubmit} action="/dropshipping/product-pool">
  <Row>
    <Col>
    <FloatingLabel label="Store" className="mb-3">
      <Form.Control type="text" placeholder="Store" name="store_id" />
    </FloatingLabel>
    </Col>
    <Col>
    <FloatingLabel controlId="floatingPoolType" label="Pool Type">
      <Form.Control type="text" placeholder="Pool Type" name="pool_type" />
    </FloatingLabel>
    </Col>
    <Col>
    <FloatingLabel controlId="floatingPoolInfo" label="Pool Info">
      <Form.Control as="textarea" placeholder="Pool Info" name="pool_info" />
    </FloatingLabel>
    </Col>
    <Col>
      <Button type="submit"><Icon.Save /></Button>
    </Col>
  </Row>
</Form>

Answer 1

不幸的是，没有好的方法可以做到这一点，因为他们的库似乎不支持 name 属性，如下面的代码所示。 https://github.com/brennanwilkes/react-bootstrap-floating-label/blob/main/src/FloatingLabel.js.

// This is the input that is returned from their library I have simplified it a bit
<input
  className={propDefault.inputClassName}
  id={this.state.inputId}
  type={propDefault.type}
  value={this.state.text}
  onChange={this.handleTextChange}
  style={propDefault.inputStyle}
    />

您可能会从他们的存储库中分叉出来并更新代码，将其添加到您的存储库中。

Answer 2

我不得不在“react-bootstrap-floating-label/dist/index.js”中进行以下更改以解决这些问题。

我在值中添加了以下行：function():

inputName: null !== (r = this.props.inputName) && void 0 !== r ? r : "",

and in t.createElement("input") added:

className: d.inputClassName,

下面是我的最终代码

key: "render",
                value: function() {
                    var e, n, r, o, i, a, l, u, c, s, f, p = this, d = {
                        className: null !== (e = this.props.className) && void 0 !== e ? e : "",
                        labelClassName: null !== (n = this.props.labelClassName) && void 0 !== n ? n : "",
                        **inputClassName: null !== (r = this.props.inputClassName) && void 0 !== r ? r : "",**
                        inputName: null !== (r = this.props.inputName) && void 0 !== r ? r : "",
                        type: null !== (o = this.props.type) && void 0 !== o ? o : "text",
                        label: null !== (i = this.props.label) && void 0 !== i ? i : "Floating Label",
                        style: null !== (a = this.props.style) && void 0 !== a ? a : {},
                        labelStyle: null !== (l = this.props.labelStyle) && void 0 !== l ? l : {},
                        inputStyle: null !== (u = this.props.inputStyle) && void 0 !== u ? u : {}
                    };
                    return t.createElement(t.Fragment, null, t.createElement("div", {
                        className: "floating-label ".concat(d.className),
                        id: this.state.id,
                        style: d.style
                    }, t.createElement("input", {
                        className: d.inputClassName,
                        name: d.inputName,
                        id: this.state.inputId,
                        type: d.type,
                        value: this.state.text,
                        onChange: this.handleTextChange,
                        onBlur: function(t) {
                            p.props.onBlur && p.props.onBlur(t)
                        },
                        onKeyDown: function(t) {
                            "Enter" === t.key && p.handleTextChange(t, !0)
                        },
                        style: d.inputStyle
                    }), t.createElement("label", {
                        id: this.state.labelId,
                        className: "".concat(d.labelClassName).concat(this.state.isActive ? " floating-label-active" : ""),
                        style: d.labelStyle
                    }, d.label), this.props.loadingCog ? t.createElement(_, {
                        id: this.state.cogId,
                        rotating: null !== (c = this.props.loadingCogSpinning) && void 0 !== c && c,
                        size: null !== (s = this.props.loadingCogSize) && void 0 !== s ? s : 30,
                        style: null !== (f = this.props.loadingCogStyle) && void 0 !== f ? f : {}
                    }) : t.createElement(t.Fragment, null)))
                }

并对组件进行了以下更改：

<Col>
     <FloatingLabel label="Store" className="mb-3" inputName="store_id">
       <Form.Control type="text" placeholder="Store" />
    </FloatingLabel>
</Col>

Answer 3

我是您正在使用的库的创建者。如果您将问题添加到 GitHub 页面并具有您正在寻找的功能，我将实现它

如何将名称属性添加到输入？

How can I add a name attribute to an input?

reactjs

react-bootstrap

bootstrap-4