2017-01-23 28 views
0

我正在使用React Native並具有這些功能。 renderInputs()生成一些輸入字段,而getNextWord()做一些不相關的事情,而且它更新狀態。按鈕單擊時清除TextInput值 - 反應本機

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

回答

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 ... 
    }); 
} 

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

+0

謝謝你的時間和答案,最後我解決了它使用的方法清除(0) – splunk

+0

我猜你是新的編程和SO :)我不知道'clear(0)'是什麼意思。很高興你找到了解決方案! – goldylucks