Блог

Я пытаюсь создать функцию onClick, которая, когда пользователь нажимает на текстовую область, автоматически полностью расширяется.

Вот моя кодовая база:

 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 amp;amp; <p className="help is-danger">{error.message}</p>}
        </div>
      );
    }
   ...
  }
}

export default DynamicWidthInput;
 

Вот как я отображаю текстовую область:

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

Вот как выглядит мой проект:

Ожидаемый полный дисплей, подобный этому:

Я думаю, вы можете использовать этот стиль.

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

textarea:focus {
    height: 300px;
}