刪除文本

Question

我使用的是原生的反應來構建應用程序 我的設置與信創建的每個按鈕

我想這onPress將運行刪除裏面的字母功能按鍵內循環即按

按鈕到目前爲止，我的代碼如下：

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的返回部分中說出變量名來呈現組件的數組。

現在，要刪除被點擊的按鈕（「刪除字母」）的內容，您必須將字母列表移動到組件狀態。在那裏，你可以像定義的數據結構：

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

在上述結構中，如果this.state.letters['a']是真實的，你看這封信;否則，你不會顯示它。簡單地說，執行以下操作時，您地圖：

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