为什么我要得到“未定义的不是一个对象”(计算"inputRef.current.incFont“)？

Question

它不能做我想做的事。

我有两个textArea，我把它们当作按钮使用。一个会增加FontSize，另一个会降低它。

当我点击decreaseFont文本时，我会得到这个错误。

这是我添加的代码，

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>

Answer 1

更改useImperativeHandle如下，

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

工作代码- https://codesandbox.io/s/distracted-burnell-0h70g?file=/src/App.js