I have this code:
constructor(props: any) {
super(props);
this.state = {
pin: "",
};
this.inputRefs = [
createRef(),
createRef(),
createRef(),
createRef()
];
}
My render:
<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>
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>
// });
}
}
Basically this is a component where users will enter a 4-digit code which will be sent to the next component as props. Thanks to anyone who can help.