从循环中创建的按钮中删除文本

Question

我正在使用react native构建应用程序我设置了一个循环，在每个按钮内创建带有字母的按钮

我希望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

如果您想动态创建组件，并为字母数组中的每个字母创建一个按钮，您可以执行以下操作(在渲染方法中)。

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']为true，则显示字母；否则，你不会显示它。简单地说，当你绘制地图时，请执行以下操作：

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