Разрешить разрыв строки пользовательского управления через ввод в реакции - PullRequest
Новая
       84

Разрешить разрыв строки пользовательского управления через ввод в реакции

0 голосов
/ 09 мая 2020

Я хотел бы отображать разрыв строки каждый раз, когда пользователь нажимает кнопку ввода в поле ввода. Позвольте мне показать вам этот пример изображения: https://i.stack.imgur.com/wyF4R.png

Как видите, пользователь пишет на входе: 

line 1
line 2
line 3
line 4

Но мое приложение не распознает это как разрывы строк и показывает все в одной строке, как показано над входами.

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

    <TextField
      label="Description"
      variant="outlined"
      id="desc"
      type="text"
      name="Description"
      value={this.state.desc}
      onChange={(e) => {
        this.setState({ typed: true });
        this.setState({ desc: e.target.value });
      }}
      required
      disabled={this.state.loading}
      multiline
    ></TextField>

Я не уверен, как визуализировать каждую строку break, который пользователь помещает во ввод, особенно потому, что каждое изменение регистрируется как значение состояния описания, и даже если я использую регулярное выражение для замены разрывов строк на br, оно просто покажет br как строку.

1 Ответ

0 голосов
/ 09 мая 2020

Для этого вы можете использовать Атрибут формы HTML <textarea> в текстовом вводе внутри компонента <TextField />: 

<textarea form="usrform" {...props}>{props.value}</textarea>

Ссылка HTML Атрибут формы textarea .

...