Javascript 为什么我的handleChange方法不格式化用户'；是用十进制数字输入的吗？

我正在尝试使用以下方法将用户的输入数据格式化为以下格式

XX.xxxxxx

范围

handleChange = (e) => {
  let dataFormatted = e.target.value < 1 || e.target.value >= 10 ? (+e.target.value).toFixed(6) : '0'+(+e.target.value).toFixed(6)
  console.log("dataFormatted: ", dataFormatted)
};

但我输入十进制数的结果返回

0NaN

，我希望看到的输出如下：

0.060 => 00.060000
10.4960 => 10.496000
1.99 => 01.990000
29.666666 => 29.666666

以下是完整的代码：

<Input
  id="location-latitude-control"
  label="Latitude"
  title="Required: Latitude"
  name="location.latitude"
  value={location.latitude}
  type="number"
  handleChange={this.handleChange}
/>

handleChange = (e) => {
  if (isNaN(+e.target.value)) return;
    let dataFormatted =
      e.target.value < 1 || e.target.value >= 10
        ? (+e.target.value).toFixed(6)
        : "0" + (+e.target.value).toFixed(6);
    this.handleChangeLatitude(e.target.name, e.target.value)
};

handleChangeLatitude = (name, value) => {
  this.props.saveLocationEntity({
    dataPath: name,
    value: value,
  });
};

export const mapDispatchToProps = (dispatch) => ({
  saveLocationEntity: (payload) => {
    return dispatch({
      type: SAVE_LOCATION_ENTITY,
      data: payload,
    });
  },
});

handleChange=（e）=>{
如果（isNaN（+e.目标值））返回；
让数据格式化=
e、 target.value<1 | e.target.value>=10
（+e.目标值）固定（6）
：“0”+（+e.target.value）.toFixed（6）；
this.handleChangeLatitude（e.target.name，e.target.value）
};
handleChangeLatitude=（名称、值）=>{
this.props.saveLocationEntity({
dataPath:name，
价值：价值，
});
};
导出常量mapDispatchToProps=（调度）=>({
saveLocationEntity：（有效负载）=>{
退货({
类型：保存位置实体，
数据：有效载荷，
});
},
});

我假设您的handleChange作为onChange处理程序运行，这意味着它将在输入中的每个按键上运行。当您按

作为输入中的第一个键时，它会尝试运行您的代码，当然

+（.）

会产生NaN

如果结果为NaN，则不要运行代码：

handleChange = (e) => {
  if (isNaN((+e.target.value))) {
    return;
  }
  let dataFormatted = e.target.value < 1 || e.target.value >= 10 ? (+e.target.value).toFixed(6) : '0'+(+e.target.value).toFixed(6)
  console.log("dataFormatted: ", dataFormatted)
};

handleChange=（e）=>{
if（isNaN（（+e.target.value）））{
返回；
}
让dataFormatted=e.target.value<1 | | e.target.value>=10（+e.target.value）.toFixed（6）：“0”+（+e.target.value）.toFixed（6）
log（“dataFormatted:”，dataFormatted）
};

键入数字时，没有发现任何问题。您最好为您添加

type=number

输入

元素@DennisVash我为field元素提供了type=“number”，但它仍然不起作用。你打开沙箱了吗？问题出在哪里？是的，我测试了沙盒，我可以看到它在那里工作。我尝试了上面的代码，解决了
NaN
问题，但它仍然不允许我在按下decimal后在字段中输入任何数字。例如，如果我键入
2
，我可以看到它被格式化为
02.000000
，但如果我尝试键入
4.5
，则该字段仅显示
04.000000
，它必须是代码中的其他内容。这里的结果很好：您是否尝试在state中使用该值，然后将input value属性设置为与格式化数据对应的state变量？我刚刚用文章底部的完整代码更新了我的文章。你能回顾一下，让我知道为什么它不能使用我的代码吗？是的，这是因为你使用了一个带有
value={location.latitude}
的受控输入。您可以从输入中删除value属性，或者在表单的submit或输入的onBlur上处理格式设置，而不是onChange。
handleChange = (e) => {
  if (isNaN((+e.target.value))) {
    return;
  }
  let dataFormatted = e.target.value < 1 || e.target.value >= 10 ? (+e.target.value).toFixed(6) : '0'+(+e.target.value).toFixed(6)
  console.log("dataFormatted: ", dataFormatted)
};