javascript - 如何创建一个动态输入字段，该字段将根据输入内的标签更新宽度

Question

我有一个看起来像这样的日期输入字段

目前，我的 css 已设置为使标签仅浮动在输入上方（我知道，不是最好的），并且如果我将标签更改为具有更大字符长度的内容，则与日期值重叠。我可以将标签本身放在输入中以使字段的宽度取决于标签的长度的最佳方法是什么？

我的输入组件

<div className={`custom-input-container ${required ? 'required' : ''}`}>
<label
          className="date-label inline-label"
          data-content={label}
          htmlFor={id}
        >
          {label}
        </label>
        <input
          className="input-with-inline-label"
          type="text"
          id={id}
          onClick={onClick}
          value={value}
        />
</div>

标签： javascriptcssreactjs

Answer 1

好的所以我发现你可以通过使用它的 ref 属性来设置标签组件的宽度来设置状态宽度值

const [width,setWidth] = useState(0)

const CustomInput = ({ value, onClick }) => {
<div className={`custom-input-container ${required ? 'required' : ''}`}>
        <label
          className="date-label inline-label"
          data-content={label}
          htmlFor={id}
          ref={(el) => {
            if (!el) return
            setWidth(el.getBoundingClientRect().width)
          }}
        >
          {label}
        </label>
        <input
          className="input-with-inline-label"
          type="text"
          onClick={onClick}
          value={value}
          style={{
            width: `${width + 140}px`,
            minWidth: '150px',
          }}
        />
}

这是使用以下css

.inline-label {
          position: absolute;
          top: 2px;
          padding: 0 0 0 8px;

        }

        .input-with-inline-label {
          text-align: right;
        }