削除テキストは、私が使用している

Question

は

私はたonPressは、内部の文字を削除する機能を実行することを希望する各ボタンの内側に文字でボタンを作成するループをアプリケーション Iセットアップを構築するネイティブの反応します

を押したボタンこれまでのところ、私のコードは次の通りである：

let LettersBoxes = []; 
    var test = []; 
    for (let i = 0; i < answerlen; i++) { 
     console.log(test) 
     let letter = answer[mixingLetters[i]] 
     console.log('check',letter) 
     LettersBoxes.push(
      <TouchableOpacity onPress={() => this.onClick(letter, test)} style={styles.boxStyle} key={i}> 
       <Image 
       source={require('../../img/parchment3.gif')} 
       style={{width: 40, height: 40, alignItems: 'center'}} 
       > 
       <View> 
        <Text 
        style={{fontSize:28, fontWeight: 'bold',}}> 
        {letter} 
        </Text> 
       </View> 
       </Image> 
      </TouchableOpacity> 
     ); 
     } 
    return(
     <View style={styles.viewStyle}>{LettersBoxes}</View> 
    ) 
    } 
}; 

それは私が何をしようとしています何をすることは可能ですか？

Answer 1

文字列の各文字に対してボタンを作成してコンポーネントを動的に作成する場合は、次のように（renderメソッド内で）行うことができます。

const letters = ['a', 'b', 'c']; 

const buttons = letters.map(letter => (
    <Button>{letter}</Button> 
); 

return (
    <View> 
    {buttons} 
    </View> 
); 

私は機能に焦点を当てるために多くのことを省略しました。また、「ボタン」ではなく、TouchableOpacityを使用して不足している小道具を追加することもできます。

基本的に、文字のリストが与えられている場合は、各文字を内容に文字が含まれているボタンコンポーネントにマップする必要があります。 Reactは、JSXのreturn部分の変数名を単に言うことで、コンポーネントの配列をレンダリングする方法を知っています。

ここで、クリックされたボタンの内容（「文字の削除」）を削除するには、文字のリストをコンポーネントの状態に移動する必要があります。そこには、のようなデータ構造を定義することができます。上記構成において

// component state 
{ 
    letters: { 
    a: true, 
    b: false, 
    c: true, 
    // ... 
    } 
} 

、this.state.letters['a']がtrueの場合、あなたが文字を表示します。そうでなければ、あなたはそれを表示しません。

のonClickイベントハンドラメソッドは、のようなもののように定義されて

const buttons = Object.keys(this.state.letters).map(letter => { 
    if (this.state.letters[letter]) { 
    return <Button onClick={() => onSomethingClick(letter)}>{letter}</Button>; 
    } 
    else { // no letter should appear, so empty content 
    return <Button onClick={() => onSomethingClick(letter)}></Button>; 
    } 
} 

：あなた `onClick`機能がどのように見える方法を

onSomethingClick = (letter) => { 
    this.setState({ 
    letters: { 
     ...this.state.letters, // use Object.assign if you can't use spread operator 
     [letter]: !this.state.letters[letter] // switches T to F and vice-versa 
    } 
    } 
}