按钮单击时清除TextInput值 - 反应本机

Question

我正在使用React Native并具有这些功能。 renderInputs()生成一些输入字段，而getNextWord()做一些不相关的事情，而且它更新状态。

getNextWord() { 
    // do some stuff  
    this.setState({ set states here }); 
} 

renderInputs() { 
    var products = [] 
    // some code that generates a randomNumber 
    for (let p = 0; p < randomNumber; p++){ 
     products.push (<TextInput defaultValue="" maxLength={1} key={p} onChangeText={(text) => this.handleChange(text, p)}></TextInput>); 
    } 
    return products 
} 

在我render()方法我显示输入字段，我把我的按钮，每次点击就会触发getNextWord()功能。现在

<View>{this.renderInputs()}</View> 
<Button onPress={this.getNextWord.bind(this)}>Get Next Word</Button> 

，我可以看到正确的输入字段，每次我的“获取下一个字”按钮，单击renderInputs()产生输入字段的新的一群。

我的问题是，如果我在其中一个输入字段中输入一个字符，一旦我点击按钮，我仍然可以看到那封信，而我想让所有的输入字段都是空的。

我试过使用defaultValue=""，但它似乎不起作用。 如果我这样做：defaultValue="A"这就是我运行应用程序后得到的结果。

例如：

第一次renderInputs()叫做：

_ _ _ _ _ _ //空输入（比方说randomNumber是6）

然后我在第二输入键入栏中输入字母，让我们说 “G”

_ g^_ _ _ _

Ø NCE我点击“获取下一个字”按钮renderInputs()产生randomNumber（假设产生randomNumber 8）的输入栏，这就是我得到：

AGAAAAAA

，但我想有：

AAAAAAAA

Answer 1

这里是我的完整的解决方案，然后解释：

class MyComponent extends Component { 

    // initial state 
    state = { 
    inputsNumber: this.randomInputs() 
    } 

    getNextWord() { 
    // do some stuff 
    const nextInputNumber = this.randomInputs() 
    const inputsState = {} 

    // set all inputs to A 
    for (let p = 0; p < nextInputNumber) { 
     inputsState[this.inputKey(p)] = 'A' 
    } 
    // set new random number of inputs 
    this.setState({ 
     ...inputsState 
     inputsNumber: nextInputNumber, 
     // set rest of state here if needed ... 
    }); 
    } 

    renderInputs() { 
    var products = [] 
    // some code that generates a randomNumber 
    for (let p = 0; p < this.state.inputsNumber; p++){ 
     products.push(
     <TextInput 
      maxLength={1} 
      key={p} 
      onChangeText={(text) => this.handleChange(text, p)} 
      value={ this.state[this.inputKey(p)]} 
     /> 
    ); 
    } 
    return products 
    } 

    handleChange (text, p) { 
    this.setState({ 
     [this.inputKey(p)]: text 
    }) 
    } 

    randomInput() { 
    return Math.floor(Math.random() * 8) + 1 // or whatever random function 
    } 

    inputKey (p) { 
    return 'input ' + p 
    } 
} 

第一件事第一个：
我不认为你想在渲染函数中生成随机数。这意味着每次render will get called时，输入的数量都会发生变化，并且这会导致UX非常糟糕，因为在每次状态更改时都会调用render（可能）。因此，使用状态，以保持该号码的轨迹：

import React, { Component } from 'react' 
class MyComponent extends Component { 

    // initial state 
    state = { 
    inputsNumber: this.randomInputs() 
    } 

    getNextWord() { 
    // do some stuff 
    this.setState({ 
     inputsNumber: this.randomInputs(), 
     // set rest of state ... 
    }); 
    } 

    randomInput() { 
    return Math.floor(Math.random() * 8) + 1 // or whatever random function 
    } 
} 

现在使用你输入正确的ü需要bound their values to the state还有：

renderInputs() { 
    var products = [] 
    for (let p = 0; p < this.state.inputsNumber; p++){ 
    products.push(
     <TextInput 
     maxLength={1} 
     key={p} 
     onChangeText={(text) => this.handleChange(text, p)} 
     value={this.state[this.inputKey(p)]} 
     /> 
    ); 
    } 
    return products 
} 

handleChange (text, p) { 
    this.setState({ 
    [this.inputKey(p)]: text 
    }) 
} 

inputKey (p) { 
    return 'input ' + p 
} 

我们“重置”所有输入字母A，我们需要对点击事件做一些修改：

getNextWord() { 
    // do some stuff 
    const nextInputNumber = this.randomInputs() 
    const inputsState = {} 

    // set all inputs to A 
    // since we don't know how many inputs we have, we use the 'nextInputNumber' we just generated. 
    for (let p = 0; p < nextInputNumber) { 
    inputsState[this.inputKey(p)] = 'A' 
    } 
    // set new random number of inputs 
    this.setState({ 
    ...inputsState 
    inputsNumber: nextInputNumber, 
    // set rest of state here if needed ... 
    }); 
} 

注意：我没有测试过这个。如果有什么不工作，创建一个小提琴，我会修改它为一个工作示例