当有一些价值时如何使textarea扩展答案

【问题标题】：How to make textarea expand when there is some value当有一些价值时如何使textarea扩展
【发布时间】：2021-10-11 05:57:11
【问题描述】：

当我在其中输入一些文本时，我试图让 textarea 展开，我正在使用焦点 css 使其展开，但是当我点击 textarea 之外它会恢复为默认值。

这是我的代码库：

<DynamicWidthInput
  id="addLoanClause"
  value={addLoanClause}
  type="textarea"
  placeholder=""
  error={showErrors && getError("addLoanClause")}
  onChange={e =>
    handleDynamicStateChange(e, setAddLoanClause)
  }
  size={"xl"}
  rows="5"
/>

这是我的 style.css：

.dynamic-textarea {
  text-align: left;
  transition: all .3s ease;
  height: 60px;
}

.dynamic-textarea:focus {
  height: 150px;
  width: 650px !important;
}

当textarea中有一些文本会自动扩展时，如何实现功能？我正在使用反应

更新并添加组件DynamicWidthInput.js：

class DynamicWidthInput extends React.Component {
  componentDidMount() {
    const { id, value } = this.props;
    resizable(document.getElementById(id), 16, value);
  }

  componentDidUpdate(prevProps) {
    const { id, value } = this.props;

    if (this.props.value !== prevProps.value) {
      resizable(document.getElementById(id), 16, value);
    }
  }

  render() {
    const { id, placeholder, type, onChange, value, error, size } = this.props;
    if (type === "textarea") {
      return (
        <div style={{ display: "inline-block", verticalAlign: "top" }}>
          <textarea
            className={`input dynamic-input dynamic-textarea ${size}`}
            id={id}
            onChange={onChange}
            placeholder={placeholder}
            value={value}
            wrap="soft"
            maxLength="1000"
            {...this.props}
          />
          {error && <p className="help is-danger">{error.message}</p>}
        </div>
      );
    }

【问题讨论】：

标签： javascript css reactjs react-hooks styling

【解决方案1】：

当发生更改时，您可以动态更改 textarea 中的rows 属性。

这是一个带有示例的 Codepen：https://codepen.io/JaKto/pen/qeBpZM

【讨论】：

你是怎么用 react-hooks 写的？