Formik component=“textarea” 占位符中的多行

Question

如何在 Formik textarea 的占位符文本中打印 newline/return。我已经尝试过\n，似乎没有任何效果。

// &#13;, &#10; didn't work
<Field
      className="form-control"
      component="textarea"
      name="dayWiseItinerary"
      rows="6"
      placeholder="
      day 1: Temple visit,&#13;&#10;
      day 2: Jungle barbeque,\n
      day 3: Waterfall visit in the evening,\n
      day 4: Visit UNESCO World Heritage Site,\n
      day 5: Art gallery show,\n
      day 6: Visit grand swimming pool,\n
      day 7: Visit to Blue fort
      "
    />

Answer 1

Template Literals 允许您指定多行文本字符串。

<textarea
  cols={40}
  placeholder={`day 1: Temple visit,&#13;&#10;
day 2: Jungle barbeque,\n
day 3: Waterfall visit in the evening,\n
day 4: Visit UNESCO World Heritage Site,\n
day 5: Art gallery show,\n
day 6: Visit grand swimming pool,\n
day 7: Visit to Blue fort`}
  rows={20}
/>

注意：由于这是一个字符串模板文字，请注意模板中的空格。请注意上面每行的前导空格不存在。另请注意，现在换行符 \n 已呈现。

Answer 2

扩展@Drew Reese 的回答，关于他关于空格的注释，您也可以这样做：

<textarea
  cols={40}
  placeholder={'day 1: Temple visit,&#13;&#10;'
    + 'day 2: Jungle barbeque,\n'
    + 'day 3: Waterfall visit in the evening,\n'
    + 'day 4: Visit UNESCO World Heritage Site,\n'
    + 'day 5: Art gallery show,\n'
    + 'day 6: Visit grand swimming pool,\n'
    + 'day 7: Visit to Blue fort'}
  rows={20}
/>

Answer 3

<Field component="textarea" rows="4" value={""}></Field>

Formik component=“textarea” 占位符中的多行

Formik component=“textarea” multiline in placeholder

reactjs

formik