Блог

Главная - Вопросы по программированию - React Native Android: Как получить доступ к различным полям ввода текста?

React Native Android: Как получить доступ к различным полям ввода текста?

#react-native #react-native-textinput

Вопрос:

Я создаю преобразователь температуры с 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 amp;amp; `${((parseFloat(valueF) - 32) / 1.8).toFixed(2)}`) ||
            valueC
          }
          onChangeText={(valueC) => setValueC(valueC)}
        />
        <Text style={styles.symbol}>amp;deg;C</Text>
      </View>
      <View style={styles.container}>
        <Text style={styles.text}>Fahrenheit:</Text>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          value={
            (valueC amp;amp; `${(parseFloat(valueC) * 1.8   32).toFixed(2)}`) ||
            valueF
          }
          onChangeText={(valueF) => setValueF(valueF)}
        />
        <Text style={styles.symbol}>amp;deg;F</Text>
      </View>
      <View style={styles.container}>
        <Text style={styles.text}>Kelvin:</Text>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          value={
            (valueC amp;amp; `${(parseFloat(valueC)   273.15).toFixed(2)}`) ||
            (valueF amp;amp;
              `${((parseFloat(valueF)   459.67) * 0.555555).toFixed(2)}`) ||
            valueK
          }
          onChangeText={(valueK) => setValueK(valueK)}
        />
        <Text style={styles.symbol}> K</Text>
      </View>
    </View>
  );
};

Комментарии:

1. Вы можете добавить логику для очистки других значений при переключении между textinuts с помощью метода isFocused() textinput. reactnative.dev/документы/textinput#сфокусирован

2. вы ошибаетесь с той value частью TextInput . Сохраните value =valueC и рассчитайте значение valueC on onChangeText of valueF . По мере обновления состояния ваш пользовательский интерфейс будет повторно отрисован. Все еще проблема, тогда дайте мне знать?

3. Это сработало. Большое спасибо. Мне не нужно было фокусироваться.

Ответ №1:

Вы можете очистить значение текстового поля с помощью функции onFocus()

Метки: