Reactjs React本机获取InputBox的值

我有以下代码：

constructor(props: any) {
    super(props);
    this.state = {
      pin: "",
    };

    this.inputRefs = [
      createRef(),
      createRef(),
      createRef(),
      createRef()
    ];
  }

我的渲染：

<View style={{ flexDirection: "row" }}>
  {
    this.inputRefs.map((k, idx) => (
      <TextInput
        onChange={() => this.goToNextInput(idx)}
        ref={r => this.inputRefs[idx] =  r}
        maxLength={1}
        style={styles.pInput}
      />
    ))
  }
</View>

{
this.inputRefs.map（（k，idx）=>(
this.goToNextInput（idx）}
ref={r=>this.inputRefs[idx]=r}
maxLength={1}
style={style.pInput}
/>
))
}

goToNextInput=（idx）=>{
if（idx<3）{
this.inputRefs[idx+1].focus（）；
}否则{
//如果所有4个文本输入都已填写，
//我想获取这些值，将它们组合并存储在如下状态：
//这是我的国家({
//别针：
// });
}
}

---

基本上，这是一个组件，用户将输入一个4位代码，作为道具发送到下一个组件。感谢所有能够提供帮助的人。

这可能会有所帮助，谢谢@GuruparanGiritharan，但我使用类组件，也使用循环来生成文本输入。我尝试了这个解决方案，但没能成功。我想出来了。应该是“onChangeText”，而不是“onChange”。是的，示例用于react，但概念类似

goToNextInput = (idx) => {
  if (idx < 3) {
    this.inputRefs[idx + 1].focus();
  } else {
    // If all 4 TextInput have been filled in,
    // I want to get the values, combine them and store them in state like this:
    // this.setState({
    //  pin: <value>
    // });
  }
}