react-native - React Native Android：如何能够访问不同的 Textinput 字段？

Question

我正在创建一个带有 3 个文本输入字段的温度转换器，一个用于 C，一个用于 F，一个用于 K。当我在 C 字段中输入一个值时，它会计算 F 和 K 的值。到目前为止一切都很好。但是当我想在 F 字段中输入一个值，或返回 C 字段时，这些值会停留在最后计算的值上。

如何使所有字段再次可食用以在任何字段中输入新值？

问候，拉斯

export const ConversionInput = () => {
  const [valueC, setValueC] = useState();
  const [valueF, setValueF] = useState();
  const [valueK, setValueK] = useState();

  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.text}>Celcius:</Text>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          // value={valueC}
          value={
            (valueF && `${((parseFloat(valueF) - 32) / 1.8).toFixed(2)}`) ||
            valueC
          }
          onChangeText={(valueC) => setValueC(valueC)}
        />
        <Text style={styles.symbol}>&deg;C</Text>
      </View>
      <View style={styles.container}>
        <Text style={styles.text}>Fahrenheit:</Text>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          value={
            (valueC && `${(parseFloat(valueC) * 1.8 + 32).toFixed(2)}`) ||
            valueF
          }
          onChangeText={(valueF) => setValueF(valueF)}
        />
        <Text style={styles.symbol}>&deg;F</Text>
      </View>
      <View style={styles.container}>
        <Text style={styles.text}>Kelvin:</Text>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          value={
            (valueC && `${(parseFloat(valueC) + 273.15).toFixed(2)}`) ||
            (valueF &&
              `${((parseFloat(valueF) + 459.67) * 0.555555).toFixed(2)}`) ||
            valueK
          }
          onChangeText={(valueK) => setValueK(valueK)}
        />
        <Text style={styles.symbol}> K</Text>
      </View>
    </View>
  );
};

标签： react-nativereact-native-textinput

Answer 1

您可以在 onFocus() 的帮助下清除文本字段的值