单击时如何使文本区域扩展？

Question

我正在尝试创建 onClick 函数，当用户单击 textarea 时它会自动完全展开。

这是我的代码库：

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

export default DynamicWidthInput;

这是我显示文本区域的方式：

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

这是我的项目的样子：

预计完全显示如下：

Answer 1

我认为你可以使用这种风格。

textarea {
    transition: all .3s ease;
    height: 100px;
}

textarea:focus {
    height: 300px;
}