时间戳

首页 > 解决方案 > 在 TextField 中的值后显示符号

reactjs - 在 TextField 中的值后显示符号

问题描述

我目前正在为 Material-UI TextField 使用以下代码

<TextField
  id="submissionMark"
  name="submissionMark"
  type="number"
  label="Submission Mark"
  className={classes.textField}
  value={Math.round(this.state.mark)}
  onChange={this.handleChange}
  helperText={this.state.errors.mark}
  error={this.state.errors.mark ? true : false}
  fullWidth
/>

文本字段中的值是一个数字，但我试图%在数字之后显示一个而不将 附加%到状态。

我尝试通过 API 和在线搜索解决方案，但找不到任何东西。

示例：用户输入55和文本字段显示55%

这样的东西可以显示吗？

标签： reactjsmaterial-ui

解决方案

只需附加%在value道具的末尾。这样您就不必将符号存储在状态中。

<TextField
  id="submissionMark"
  name="submissionMark"
  type="number"
  label="Submission Mark"
  className={classes.textField}
  value={`${Math.round(this.state.mark)}%`}
  onChange={this.handleChange}
  helperText={this.state.errors.mark}
  error={this.state.errors.mark ? true : false}
  fullWidth
/>

推荐阅读