#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, но не в моей среде..