javascript - Reactjs - 为动态创建的按钮创建切换

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 移动到内部处理切换状态的组件中。

class MyButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        toggle: false
    }
    this.setToggle = this.setToggle.bind(this);
  }

  setToggle(){
    this.setState({
        toggle: !this.state.toggle
    })
  }

    render(){
    return <TouchableOpacity onClick={this.setToggle} className={this.state.toggle ? 'red' : 'blue'}>{this.props.name}</TouchableOpacity>
  }
}

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

这是一个 fiddle 示例:https://jsfiddle.net/n5u2wwjg/220149/