ボタンクリック時のTextInput値をクリアする - React Native

Question

React Nativeを使用していますが、これらの機能があります。 renderInputs()はいくつかの入力フィールドを生成し、一方getNextWord()は関係のないいくつかのことを行い、さらに状態を更新します。私render()方法で

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 
} 

Iは、入力フィールドを表示し、私は毎回が、それはgetNextWord()機能をトリガクリックされたIボタンを配置。

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

今、私が正しく入力フィールドを見ることができる、と毎回私はrenderInputs()は、入力フィールドの新しい束を生成し、「次の単語を取得」ボタンをクリックします。

私の問題は、これらの入力フィールドのいずれかの中に文字を入力すると、ボタンをクリックするとその文字が表示されますが、最初は入力フィールドをすべて空にしたいと思っています。

defaultValue=""を使ってみましたが、うまくいかないようです。 私が行う場合：defaultValue="A"これは私が一度アプリケーションを実行することです。

例：

初めてrenderInputs()が呼び出されます。

_ _ _ _ _ _ //空の入力（のはrandomNumberが6であるとしましょう）

その後、私は第二の入力に入力しますフィールド手紙、のは、G _

を "G" と言わせ_ _ _ _

O

AGAAAAAA

が、私は持っていたい：

AAAAAAAA

NCE私は renderInputs()が randomNumberを生成し、「ゲット次の単語」ボタンをクリックし、入力フィールドと、これは私が得るものである（のは、生成された乱数が8であるとしましょう）

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につながることを意味します。これは、すべての状態変更でレンダリング（潜在的に）が呼び出されるためです。だから、その数を追跡するために状態を使用します。

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 
    } 
} 

正しくuは、同様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 ... 
    }); 
} 

注：私はこれをテストしませんでした。何かがうまくいかない場合は、フィドルを作成して、それを実際の例に変更します