Ведущие нули в форме реакции - PullRequest
Новая
       6

Ведущие нули в форме реакции

0 голосов
/ 08 ноября 2018

Я промежуточный разработчик React.Я строю форму с помощью React, Redux и React Number Format.По большей части дела идут хорошо, но я немного зациклен на том, как избавиться от ведущих нулей для моего компонента.Я думаю, что понимаю проблему, но я не уверен, где находится правильное место для вмешательства.

Мое приложение развернуто здесь .Вот мой код, определяющий мое числовое поле (из customInput.js) 

             <NumberFormat
               value = {this.props.input.value || 0}
               onFocus = {()=>{}}
               onBlur = {this.handleChange.bind(this)}
               onChange = {this.handleChange.bind(this)}
               onInput = {this.handleChange.bind(this)}
                    thousandSeparator = {true}
                    prefix = {this.props.prefix}
                    suffix = {this.props.suffix}
               decimalScale = {1}
               isAllowed={(values) => {
                 const {floatValue} = values;
                 if (typeof floatValue==='undefined') {
                   return true;
                 }     

                 if (this.props.maximum) {
                   return floatValue <= this.props.maximum;
                 } else {
                   return true;
                 }

               }}
            />

. Может быть более полезным посмотреть мой полный код на GitHub .

Этомой диагноз проблемы.Мой вклад получает значение от реквизита, а не от государства.Я нашел это проще при создании некоторой логики поля, чтобы избежать двойного рендеринга.Когда поле изменяется, оно отправляется в хранилище Redux.Состояние поля на самом деле не используется вообще.Я не уверен, что это хорошая практика, но она хорошо сработала для меня.Проблема в том, что когда я отправляю изменение, добавляя начальный ноль, Redux не распознает его как изменение.Например, «005» и «5» оба видятся как 5. Следовательно, компонент не выполняет повторную визуализацию.Я пробовал много разных исправлений, но ничего не решает эту проблему.У кого-нибудь есть рекомендации?

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

ОК, я нашел исправление. Добавление в isAllowed prop оказалось правильной точкой вмешательства. Вот что я закончил: 

            <NumberFormat
               value = {this.props.input.value}
               onFocus = {()=>{}}
               onBlur = {this.handleChange.bind(this)}
               onChange = {this.handleChange.bind(this)}
               onInput = {this.handleChange.bind(this)}
                    thousandSeparator = {true}
                    prefix = {this.props.prefix}
                    suffix = {this.props.suffix}
               decimalScale = {1}
               isNumericString = {true}
               isAllowed={(values) => {
                 const {value, floatValue} = values;

                 if (typeof floatValue==='undefined' || typeof value==='undefined') {
                   return true;
                 }
                if (value.charAt(0)==='0') {
                  if (value.charAt(1) && value.charAt(1)!='.') {
                    return false
                  }
                }
                 if (this.props.maximum) {
                   return floatValue <= this.props.maximum;
                 } else {
                   return true;
                 }

               }}

            />
0 голосов
/ 08 ноября 2018

Я думаю, вы можете использовать так: 

value={parseInt(this.props.input.value, 10) || 0}

или 

value={() => {return parseInt(this.props.input.value, 10)}}

С уважением

...