Почему я получаю «неопределенный не является объектом(оценка «inputRef.current.incFont»?

#reactjs #react-native

Вопрос:

Это не делает того, чего я хочу.

У меня есть два текстовых поля, я использую их так, как они были. Один увеличит размер шрифта, другой уменьшит его.

Когда я нажимаю на уменьшение текста, я получаю эту ошибку.

Вот код, который я добавил,

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

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

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

  return(
    <TextInput style={{fontSize, borderColor:"red",borderWidth:1}} />
  )


})
 

внутри моей основной функции:

  const inputRef = useRef();
<View>
 <MyInput ref={inputRef}/>
          <Text onPress={()=>inputRef.current.incFont()}>IncreaseFont</Text>
          <Text onPress={() => inputRef.current.decFont()}>DecreaseFont</Text>

        </View>
 

Ответ №1:

Изменение useImperativeHandle , как показано ниже,

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

рабочий код — https://codesandbox.io/s/distracted-burnell-0h70g?file=/src/App.js

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

1. Спасибо, это работает. Но могу ли я спросить, почему всякий раз, когда я нажимаю на текст «Уменьшить или увеличить», он очищает ввод текста. Я имею в виду, что если я напишу «привет» в TextInput и нажму на увеличение, я хочу видеть его больше, но он очищает текст, а затем увеличивается. Как решить эту проблему?

2. Кстати, я сделал то, что вы сделали на моем эмуляторе Android. Он работает с codesandbox, как и ожидалось, но в эмуляторе он делает то же самое, я имею в виду, что он по-прежнему очищает текст, когда я нажимаю на уменьшение или увеличение. Может быть, у меня что-то не так в других моих кодах.

3. Я все еще не понимал, как это может работать с codesandbox, но не в моей среде..