React Native Android：如何能够访问不同的 Textinput 字段？答案

【问题标题】：React Native Android: How to be able to access different Textinput fields?React Native Android：如何能够访问不同的 Textinput 字段？
【发布时间】：2021-08-31 05:36:33
【问题描述】：

我正在创建一个带有 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>
  );
};

【问题讨论】：

您可以使用textinput的isFocused()方法在textinuts之间切换时添加逻辑来清除其他值。 reactnative.dev/docs/textinput#isfocused
TextInput 的 value 部分出错了。保留value =valueC 并在onChangeText 的valueF 上计算valueC 的值。随着状态更新，您的 UI 将重新呈现。仍然有问题然后告诉我？
那行得通。非常感谢。我不需要 isfocused。

标签： react-native react-native-textinput

【解决方案1】：

可以通过 onFocus() 清除文本字段的值

【讨论】：