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

Question

I have an input field where I enter numbers

When the onBlur fires, I need to add a % symbol to my numbers i have this function

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);
}

I'll tell you briefly what it does. When onBlur is triggered, if there is nothing in the input field, then there will be 0, if we enter numbers, it will save the numbers.

How to add % character to numbers when onBlur fires? I have custom an input field that accepts events and a value -

<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,
    },
  }}
/>;

Answer 1

Use a Hook to remember the value, and append % in the onBlur callback

 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>