Блог

Главная - Вопросы по программированию - Как я могу изменить размер шрифта всякий раз, когда я нажимаю на текст?

Как я могу изменить размер шрифта всякий раз, когда я нажимаю на текст?

#reactjs #react-native

Вопрос:

Я хочу изменить размер шрифта, нажав на Уменьшить шрифт, увеличить шрифт текста.

Это работает. Но всякий раз, когда я нажимаю на текст с уменьшенным или увеличенным шрифтом, все, что находится внутри TextInput, удаляется, а граница TextInput увеличивается или уменьшается, поэтому размер шрифта тоже меняется. Но я не хочу, чтобы текст внутри TextInput удалялся.

Что мне делать ?

Вот соответствующий код для этого:

 const MyInput = React.forwardRef((props,ref) => {

  const [fontSize, setFontSize] = useState(12);

  React.useImperativeHandle(ref,() => ({
    incFont: () => {
      setFontSize(fontSize => fontSize 2);
    },
    decFont: () => {
      setFontSize(fontSize => fontSize-2);
    }
  }))
  

  return(
    <TextInput
      value={props.value}
      onChange={(e) => props.setValue(e.target.value)}
      style={{ fontSize, borderColor: "red", borderWidth: 1 }}
    >      
    </TextInput>  )


})

Внутренняя основная функция:

 const inputRef = useRef();
  const [value, setValue] = useState("");

 return(
<View>
 <MyInput ref={inputRef} value={value} setValue={setValue}/>
          <Text onPress={()=>inputRef.current.incFont()}>IncreaseFont</Text>
          <Text onPress={() => inputRef.current.decFont()}>DecreaseFont</Text>
</View>)

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

1. вы можете разместить песочницу? я не могу воспроизвести вашу проблему с образцом безопасной среды, который я создал

2. он работает в песочнице, но не в моем приложении… его сделал кто-то другой, codesandbox.io/s/distracted-burnell-0h70g?file=/src/App.js но это не работает для моего приложения, я не знаю, почему

3. e.target.value не работает на мобильных устройствах.. Это может быть причиной. Итак, TextInput не имеет значения, как его решить?

Ответ №1:

Теперь я решил эту проблему. Код на мой вопрос работает для Интернета, но не для мобильных устройств. e.target.value не работает для мобильных устройств. И в событии changeText e уже дает значение, например (e)=>e 

 const MyInput = React.forwardRef((props,ref) => {

  const [fontSize, setFontSize] = useState(12);
  const [textInputValue, setTextInputValue] = React.useState('');


  React.useImperativeHandle(ref,() => ({
    incFont: () => {
      setFontSize(fontSize => fontSize 2);
    },
    decFont: () => {
      setFontSize(fontSize => fontSize-2);
    }
  }))
  
  return(
    <TextInput
      onChangeText={(text) => setTextInputValue(text)}
      value={textInputValue}
      style={{ fontSize, borderColor: "red", borderWidth: 1 }}
    >      
    </TextInput>  )
})

И я удалил значение,заданное значение в основной функции,

 <MyInput ref={inputRef}/>

это работает идеально

Метки: ,