Question

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

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

我省略了许多关注功能的事情。而且，而不是＆＃34; Button＆＃34;你可以使用TouchableOpacity并添加缺少的道具。

基本上，给定一个字母列表，您希望将每个字母映射到其内容包含该字母的按钮组件。然后，React知道如何通过简单地在JSX的返回部分中描述变量名来呈现组件数组。

现在，要删除单击按钮的内容（＆＃34;删除字母＆＃34;），您必须将字母列表移动到组件状态。在那里你可以定义一个数据结构，如：

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

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

1 个答案: