Реагирует на функцию «handleInputChange», которая не работает с некоторыми входами - PullRequest
Новая
       36

Реагирует на функцию «handleInputChange», которая не работает с некоторыми входами

0 голосов
/ 15 октября 2019

Я создаю систему управления запасами, которая позволяет пользователям хранить информацию о предметах в их доме. Если у них есть яблоко, они могут сохранить его имя («Apple»), значение ($ 2,99) и количество (1) в localStorage.

Существует три поля ввода:

Имя,Значение и количество. 

<input onChange = {props.handleInputChange} type = "text" name = "name" placeholder = {props.name ? props.name : "Name"}></input>

<input onChange = {props.handleInputChange} type = "number" name = "value" placeholder = {props.value ? props.value : "Value ($)"}></input>

<input onChange = {props.handleInputChange} type = "number" min = "0" name = "quantity" placeholder = {props.quantity !== null ? props.quantity : "Quantity"}></input>

Ввод имени всегда записывается и отправляется в состояние, но остальные непоследовательно подходят null или NaN. Ввод количества делает это наиболее часто (по какой-то причине).

Теперь я абсолютно не представляю, как это может произойти или где я бы даже начал отладку. Я попытался изменить handleInputChange, чтобы он был более конкретным, но ошибка все еще непоследовательно сохраняется.

Это мой метод handleInputChange: 

handleInputChange = (event) => {
        this.setState({
            [event.target.name] : event.target.value
        });
    }

Довольно прямолинейно. Раньше было const {name, value} = event.target, но это то, что я изменил. Это не имело никакого эффекта.

Значения состояния, которые должны быть записаны, начинаются следующим образом: 

name: null,
value: null,
quantity: null,
id: null,

Компонент "Модальный" находится непосредственно в главном блоке возврата на Home.js,где состояние и большинство функций.

Моя главная проблема, которая меня очень смущает, это то, что я заставил функцию handleInputChange делать console.log() для event.name иevent.value и , что является источником проблемы. console.log() непоследовательно не регистрирует результаты , что означает, что onChange не работает в этих случаях. Игнорируя все модальные функции, событие onChange должно всегда запускать функцию при изменении.

Итак, поскольку <input type = "text"> сработало, но не <input type = "number">, я подумал просто изменитьтип ввода «текст» для значения и количества. Это не исправило это.

Для ясности и охвата, вот серия троичных методов, которые я использую для визуализации различных типов контента, которые должны появляться в модальном режиме (включая входные данные, перечисленные выше): 

{
 props.modalType !== "pocketbook" ?

      <form id = "modal-content"> 
        {props.modalType === "tax" /// For triggering the Tax Input Modal
          ? <input onChange = {props.handleInputChange} type = "number" name = "tax" placeholder = {props.tax ? 
               `${parseFloat(props.tax).toFixed(2)}%` : "Sales Tax (%)"}>
            </input>
          : // If it's not for taxes, it's for items
          <div>
            <input  type = "text" name = "name" placeholder = {props.name ? props.name : "Name"}></input>
            <br/>
            <input onChange = {props.handleInputChange} type = "text" name = "value" placeholder = {props.value ? props.value : "Value ($)"}></input>
            <br/>

            <div id = "qty-editors"> // This allows the user to set the quantity value via input or by pressing + or - buttons
                <input onChange = {props.handleInputChange} type = "text" name = "quantity" placeholder = {props.quantity !== null ? props.quantity : "Quantity"}></input>

                <div className = "div-button" id = "addition" onClick = {() => 
                {props.quantityEdit("add")}}>
                    <p className = "centered-XY">+</p>
                </div>

                <div className = "div-button" id = "subtraction" onClick = {() =>{props.quantityEdit("sub")}}>
                    <p className = "centered-XY">-</p>
                </div>

            </div>
            </div>
            }
      </form>

      :

       <div id = "pocketbook"> // This is simply for "pocket" creation, has nothing to do with the inputs.
         {
           allPockets.map(item => {
            return (

            <Pocket 
             name = {item}
             subtitle = {item}
             func = {"pocketbook"}
             pocketMethod = {props.pocketMethod}
            />

            );
           })
         }
       </div>
}

Можно утверждать, что я слишком полагаюсь на троичные операторы. Однако, если это не является причиной проблемы, не обращайтесь к ней в своем ответе.

Столько информации, сколько я дал, на самом деле проблема заключается непосредственно в функциональности onChange, потому что console.log() не запускается (опять же, непоследовательно) при изменении поля ввода. Я пытался избегать использования табуляции для циклического переключения между входами, проблема не устранена. Я старался избегать нажатия клавиши Shift внутри числовых входов, проблема сохраняется. Я попытался установить метод onChange для родительского элемента (ов), проблема не устранена. Если кто-нибудь скажет мне, что именно происходит и как я могу это исправить, это абсолютно спасет этот проект.

...