Question

我也尝试使用6个单独的1位数TextInput实例创建一个采用6位数验证编码器的视图。我想为每个输入分配一个回调，以便跟踪用户输入的代码，但看不到任何明显的方法。

我可以看到一个onChangeText属性，但是它无法识别六个TextInput中的哪个正在调用它。

我敢肯定有一个简单的方法可以做到这一点，但是这对我来说并不明显，所以我感谢您的帮助。

Answer 1

如果您使用了onChangeText属性，则可以在其中调用arrow函数，然后调用所需的回调，并传递输入的“ id” +值。

类似这样的东西：

<TextInput onChangeText={(text) => {
  this.yourCallback(text, 1); // 1 is the id of the input.
 }
/>

Answer 2

我还没有测试过，但是经过一些调整，它应该可以解决您的问题：

this.state = {
    code: []
}

onChangeText = (text, i) => {
    const code = this.state.code
    if (!Number.isNaN(text)) {
        this.setState({
            code: [...code.slice(0, i), +text, ...code.slice(i + 1)]
        })
    }
}

render(){
    return(
        {Array.from({length: 6}, (_, i) => {
            return (
                <TextInput value={this.state.code[i]} onChangeText={text => this.onChangeText(text, i)} />
            )
        })}
    )
}

由于默认JS类的行为不同，例如Chrome中使用的JS Engine V8中的Array和React Native（JavaScriptCore）中使用的默认JS类，因此Array.from在您的应用。如果您已经在项目中使用lodash或underscore，建议您改用lodash.range(6).map((i) => <TextInput ... />)。

在回调

2 个答案: