Question

当前，我遇到JS / React / React-Native问题。我从API中提取类别，并从结果中制作按钮（它们通常会根据URL中的不同变量进行更改）。我用于执行此操作的代码如下：

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} style={styles.Settingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}

使用动态生成的按钮，我希望它们能够在应用程序中进行切换。当我尝试通过以下代码利用状态时：

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} onPress={ _ => this.changeStyle} style={this.state.style === 0 ? styles.Settingcats : styles.SelSettingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}

并意识到，由于这是指所有按钮的一种状态，因此它将更改所有按钮样式。因此，我尝试在盒子的另一端进行思考，并考虑使用ID作为状态名称，创建状态，并通过外部函数利用该状态来更改其值。

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} onPress={ _ => this.changeStyle(d)} style={this.state([d]) === 0 ? styles.Settingcats : styles.SelSettingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}
changeStyle(d){
  this.setState({
    [d] : 1
})}

由于状态被当作函数使用而抛出错误。

我可以采用哪些方法使动态创建的按钮具有各自独立的切换事件？

我尝试过的其他方法：自定义开关，material-UI，但在切换按钮具有独特功能时，我陷入了同样的问题。

Answer 1

与其尝试在顶层管理状态列表，不如将TouchableOpacity移到一个内部处理切换状态的组件中。

(.*)

您可以呈现这些列表，并且每个列表都独立于其他列表管理自己的切换状态。

以下是一个小提琴示例：https://jsfiddle.net/n5u2wwjg/220149/

Answer 2

我用来实现这一目标的方法，@ simbathesailor对此表示感谢

我利用状态中的变量来动态创建状态，我可以通过使用这些状态来判断按钮是“开”还是“关”

this.state[d]

其中d是我用TouchableOpaque组件创建的动态变量。

reactjs-为动态创建的按钮创建切换

2 个答案: