Question

我正在开发一个应用程序，该应用程序允许该组中的用户加入自己选择的任何组。我在列表中显示了组名。当用户点击特定行的按钮并接受加入该组时，该特定行中的值可能会发生更改。

handleJoinGroup = (item) => {
  Alert.alert(
    'Join Group',
    'Sure to Join ' + item.name + '?',
    [
      {text: 'No', onPress: () => console.log('no')},
      {
        text: 'Yes',
        onPress: () => this.setState({'isUserJoined':'1'}),
        style: 'cancel',
      }
    ],
    {cancelable: false},
  );
}

查看

{
  item.isUserJoined == '0' ? 
  <Button
   containerViewStyle={{width:'50%', alignSelf:'flex-end', position:"absolute", top:0, right:-25}}
    onPress={()=>(onJoinGroup(item))}
    rounded = {true}
    style={{margin:10}}
    icon={{name: 'add'}}
    backgroundColor='#03A9F4'
    buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
    title='Join Group' 
  />
  : null
}

{
  item.isUserJoined == '1' ? 
  <Button
   containerViewStyle={{width:'50%', alignSelf:'flex-end', position:"absolute", top:0, right:-25}}
    onPress={()=>(onExist(item))}
    rounded = {true}
    style={{margin:10}}
    icon={{name: 'trash'}}
    backgroundColor='#DC143C'
    buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
    title='Exit Group' 
  />
  : null
}

当用户接受加入群组时，我希望isUserJoined的值更改为1，以便更新视图

Answer 1

取决于存储和将数据传递到组件的方式，您应该使用this.state.isUserJoined（如果直接从App组件访问数据）或this.props.isUserJoined（如果要通过子组件从子组件访问数据）道具）

Answer 2

如果要更新按钮的视图和onClick功能。也就是说，第一次点击的用户加入群组，然后再次点击同一按钮的用户退出群组。

通过这种方法，您可以添加更多具有相同功能的按钮（组）。

this.state = {
  isUserJoined: null,
}
...

isUserJoin(groupNo) {
  if (this.state.isUserJoined) {
    this.setState({ isUserJoined: null })
  } else {
  Alert.alert(
   'Join Group',
   'Sure to Join ' + item.name + '?',
   [
     {text: 'No', onPress: () => console.log('no')},
     {
       text: 'Yes',
       onPress: () => this.setState({ isUserJoined: item }),
       style: 'cancel',
     }
   ],
   {cancelable: false},
 );
  }
}

render() {
return (
<Button
  containerViewStyle={{width:'50%', alignSelf:'flex-end', position:"absolute", top:0, right:-25}}
  onPress={()=>this.isUserJoin('1')}
  rounded = {true}
  style={{margin:10}}
  icon={{name: 'add'}}
  backgroundColor={this.state.isUserJoined ===  '1' ? '#03A9F4' : '#FFFF'}
  buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
  title={this.state.isUserJoined ===  '1' ? 'Join Group 1' : 'Exit Group 1'}
/>
)
}

在React Native中更新特定的嵌套列表

2 个答案: