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

【问题标题】：Formik component=“textarea” multiline in placeholderFormik component=“textarea”占位符中的多行
【发布时间】：2020-06-27 06:23:13
【问题描述】：

如何在 Formik textarea 中打印占位符文本中的换行符/回车符。我试过\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
      "
    />

【问题讨论】：

你可以试试Template_literals
@keikai 是正确的，模板文字将允许占位符道具文本跨越多行。

标签： reactjs formik

【解决方案1】：

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

【讨论】：

【解决方案2】：

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 被渲染了。

【讨论】：

【解决方案3】：

扩展@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}
/>

【讨论】：