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

Posted 2023-05-07

【中文标题】React Native Android：如何能够访问不同的 Textinput 字段？

【英文标题】：React Native Android: How to be able to access different Textinput fields?

【发布时间】：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。

【参考方案1】：

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