Question

我想通过点击 DecreaseFont、IncreaseFont 文本来更改 fontSize。

它有效。但是每当我点击 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

现在，我解决了。我的问题中的代码适用于 web，但不适用于 mobile。 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>  )
})

我在主函数中删除了value,setValue，

<MyInput ref={inputRef}/>

完美运行

每次单击文本时如何更改 fontSize？

1 个答案: