Question

我是React的中级开发人员。我正在用React，Redux和React Number Format构建一个表单。在大多数情况下，事情进展顺利，但我对如何摆脱组件的前导零感到有些困惑。我认为我了解问题所在，但不确定在哪里进行干预。

我的应用已部署here。这是定义我的数字字段的代码（来自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。因此，该组件不会重新渲染。我尝试了许多不同的修复程序，但没有任何方法可以解决此问题。有人有建议吗？

Answer 1

我认为您可能会这样使用：

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

或

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

亲切的问候

Answer 2

好的，我找到了解决方法。添加到isAllowed道具最终是正确的干预点。这就是我最终得到的：

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

               }}

            />

React形式的前导零

2 个答案: