当我单击文本时，如何更改fontSize？

Question

我想通过点击fontSize来改变DecreaseFont，IncreaseFont文本。

它起作用了。但是每当我单击DecreaseFont或IncreaseFont文本时，TextInput中的任何内容都会被删除，TextInput的边框也会增加或减少，因此FontSize也会发生变化。但是我不希望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>)

Answer 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>  )
})

我删除了值，setValue的主要功能，

<MyInput ref={inputRef}/>

它工作得很完美