按鈕單擊時清除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 ... 
    }); 
} 

注意：我沒有測試過這個。如果有什麼不工作，創建一個小提琴，我會修改它爲一個工作示例