有没有办法用 React Native 处理数字输入而不是字符串？

Question

我的多表单输入值有一个反应上下文状态：

  const [formValues, setFormValues] = useState({
    sex: "male",
    unitSystem: "metric",
    heightInCm: "173",
    weightInKg: "60",
    dateOfBirth: null,
  });

我很难理解我应该如何处理我的数字输入，比如身高和体重。目前我必须以字符串格式存储它们，因为 TextInput 只接受字符串。我发现自己必须不断将字符串转换为数字以进行验证。

例如，这是我的输入处理程序：

  const toCm = (foot: string, inches: string) => {
    const footInCm = convert(parseInt(foot)).from("ft").to("cm");
    const inchesToCm = convert(parseInt(inches)).from("in").to("cm");
    const actualCm = footInCm + inchesToCm;
    return actualCm;
  };

  const handleImperialSubmit = () => {
    toCm(foot, inches);
    setFormValues((prev) => ({
      ...prev,
      heightInCm: toCm(foot, inches).toString(),
    }));
    setModalVisible(!modalVisible);
  };

有没有办法在 React Native 中处理实际数字，因为这很令人困惑。

Answer 1

简短的回答：没有。

更长的答案：还是不行，没有办法让原生的 TextInput return 数字对你做出反应，部分原因可能是因为没有办法将输入限制为仅 内置的数字进入 TextInput。您确实有几个选项可以让您的生活更轻松。

因为这只是 javascript（或我们不区分的打字稿），您可以自己实现此功能：

const [number, onChangeNumber] = React.useState(null)

return (
  <TextInput
    style={styles.input}
    onChangeText={textValue => {
      if(!isNaN(textValue) && !isNaN(parseInt(textValue))) {
        onChangeNumber(parseInt(textValue))
      } else if (textValue === "") {
        onChangeNumber(null)
      }
    }}
    value={number?.toString()}
    keyboardType="numeric"
  />
)

您可以从中创建一个组件，或者将逻辑包装到一个挂钩中，以便在所有“数字输入”上重复使用。将键盘设置为数字后，上面的示例可能有点矫枉过正，但是从该键盘您可以包含一个您可能想要或可能不需要的小数。逻辑可以相应更新。

说到挂钩，有大量您可能感兴趣的表单库可以为您完成很多繁重的工作。一些选项包括：

等等。

有没有办法用 React Native 处理数字输入而不是字符串？

Is there a way to handle number inputs instead of string with React Native?

javascript

typescript

reactjs

react-native