javascript 触发onBlur时如何向输入添加字符

t30tvxxf 于 2022-12-21 发布在 Java

关注(0)|答案(1)|浏览(113)

我有一个输入字段，可以在其中输入数字
当onBlur触发时，我需要在我的数字中添加一个%符号，我有这个函数

const onBlurValue = (day_index, value) => {
   const newBreakDownMonths = [...breakDownMonths];
   const day = newBreakDownMonths[nowMonth].break_down_days[day_index];
   if(value == "") {
      day.value = 0;
   } else {
      day.value = value;
   }
   setChangedDay(day);
}

我简单的告诉你它是做什么的，当onBlur被触发的时候，如果输入栏里没有东西，那么就会有0，如果我们输入数字，它会保存数字。
如何在onBlur触发时为数字添加%字符？我自定义了一个输入字段，可以接受事件和值-

<Input
  inputProps={{
    value: day.value,
    type: "number",
    step: "0.1",
    onKeyDown: (e) => detectKeyDown(e, day),
    onChange: (e) => onChangeValue(index, e.target.value),
    onFocus: (e) => onFocusValue(index, e.target.value),
    onBlur: (e) => onBlurValue(index, e.target.value),
    style: {
      marginTop: 0,
    },
  }}
/>;

JavaScript

来源：https://stackoverflow.com/questions/74862583/how-to-add-characters-to-input-when-onblur-fires

1条答案

按热度按时间

gudnpqoy1#

使用Hook记住该值，并在onBlur回调中追加%

const { useState } = React;

const Example = () => {

    const [value, setValue] = useState('');

    return (
        <div>
            <h1>{'Example'}</h1>
            <input
              type='text'
              value={value}
              onChange={e => setValue(e.target.value)}
              onBlur={_ => setValue(value + ' %')}
            />
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 触发onBlur时如何向输入添加字符

1条答案

相关问题

热门标签

最新问答