Ввод в реакции - maxLength и проблема размера шрифта

Question

Я пишу RPN калькулятор в реакции, и у меня есть две проблемы.Прежде всего: у меня есть два входа - один для исходного уравнения и второй для уравнения, преобразованного в обозначение RPN.Мои проблемы: 1. Я хочу ограничить максимальное количество символов и 2. Я хочу, чтобы размер шрифта при вводе уменьшался, когда длина (в пикселях) строки превышает ширину ввода.Он отлично работает при вводе «исходного уравнения», но что-то не так с «преобразованным» уравнением.

1. Так что для ограничения максимального числа символов очевидно, что я должен использовать maxLength, но по какой-то причине это не так.т работа.Я предполагаю, что это потому, что maxLength работает, если пользователь вводит что-то непосредственно во ввод, но в моем случае ввод - «readOnly» и значения добавляются кнопками.И я не знаю, так ли это, или я сделал какую-то новичок.

2. Как вы можете видеть в коде, я сделал вспомогательный div, в котором я помещаю значение из ввода и проверяю обадлины.В рендере я проверяю имя входа и пропу в зависимости от имени.Как я уже сказал - все работает нормально, когда я помещаю что-то в «исходное уравнение», но в преобразованном уравнении у меня всегда есть исходный размер шрифта.Стоит отметить, что «преобразованное уравнение» пусто в начале и заполняется в конце, когда пользователь нажимает «Решить».

   класс InputField extends Component {constructor (props) {super (props);

       this.state = {
           fontSize: 38,
           fontSizeConverted: 38
       }
   }
   isOverflow = (input, helper) => {
       if(helper.offsetWidth > input.offsetWidth - 40) {
           return true;
       } else {
           return false;
       }
   }
   componentDidUpdate(prevProps) {
       const input = document.querySelector(`input[name=${this.props.name}]`);
       const helper = document.querySelector(`#helper${this.props.name}`);
       let {fontSize} = this.state;
       if(prevProps.value.length < this.props.value.length) {
           if(this.isOverflow(input, helper)) {
               fontSize -= 5;
               this.setState({
                   fontSize,
                   fontSizeConverted: fontSize})
           }
       } else if(prevProps.value.length > this.props.value.length) {
           if(!this.isOverflow(input, helper) && !(this.state.fontSize > 38)) {
               fontSize += 5;
               this.setState({
                   fontSize,
                   fontSizeConverted: fontSize})
           }
       }
   }
   
   render() {
       return (
           <div>
           <input readOnly maxLength="30" type="text" name={this.props.name} id={this.props.id} className={`calculator__input col-${this.props.col}`}  value={this.props.value} 
           style={{"fontSize": (this.props.name === 'original-equation') ? this.state.fontSize : this.state.fontSizeConverted}} />
           <HelperDiv id={`helper${this.props.name}`} value={this.props.value} 
           font={(this.props.name === 'original-equation') ? this.state.fontSize : this.state.fontSizeConverted} />
           </div>
       )
   }}