Question

我想在单击按钮时更改按钮。我有用户列表。我想当我点击跟随按钮时，按钮变为跟随按钮。现在，当我单击按钮时，我的所有按钮都变为下一个按钮。我想更改当前按钮。这是我的代码。

import React, { Component } from "react";
 import { TouchableOpacity,StatusBar,View,Modal, 
    TouchableHighlight,StyleSheet,Image } from "react-native";
   import { connect } from "react-redux";

  import { DrawerNavigator, NavigationActions } from "react-navigation";
  import {} from 'react-native-elements';
    import ls from 'react-native-local-storage';


      import {
     Container,
  Header,
   Title,
      Content,
       Text,
         Button,
      Footer,
      FooterTab,
       Left,
     Body,
       Right,

      Input,
     Item,
    List,ListItem,Thumbnail
     }    from "native-base";

        import axios from 'axios';
          import Icon from 'react-native-vector-icons/FontAwesome';

    export default class Search extends Component {
      static navigationOptions = {
header: null
  }
        constructor(props) {
super(props);
this.state = {
  getAllUsers:'',
  checkResponce:false,
  userID:'',
  changeButtons:false,
};
  }
componentDidMount(){
ls.get("savedata").then(data => {this.setState({ userID: data.user.id })});
axios.get( "http://172.104.217.178/api/get_users" )
.then(response => {
  //alert(JSON.stringify(response));
    this.setState({getAllUsers:response.data,})
  // alert(JSON.stringify(this.state.getAllUsers));
   })
   .catch(error => alert(error.response.data));

    }
 Donefollow(getuserId){
  axios.post( "http://172.104.217.178/api/follow_user/"+this.state.userID,{
  user_id:getuserId
  } )
  .then(response => {
  //alert(JSON.stringify(response));
 if(response.data.status===1){
   this.changebutton(getuserId)
 }

})
.catch(error => alert(error.response.data));

 }

 async changebutton(followid){
this.setState({changeButtons:true})
await alert("here can i change ?")
}

 render() {
let GetUersData=[];
let UsersState=this.state.getAllUsers;
for(let property in UsersState.result){
  GetUersData.push( <ListItem avatar style={{height:71}}>
    <Left>
      <Thumbnail  source={{uri:UsersState.result[property].profile_photo}}   />
    </Left>
    <Body >
      <Text style={{marginTop:15}}>{UsersState.result[property].name}</Text>
      <Text note></Text>
    </Body>
    <Right >{this.state.changeButtons?
     <Button rounded warning onPress={this.Donefollow.bind(this,UsersState.result[property].id)}>
     <Text>Following</Text>
   </Button>: <Button rounded warning onPress={this.Donefollow.bind(this,UsersState.result[property].id)}>
  <Text>Follow</Text>
</Button>}
    {/* <Button rounded warning onPress={this.Donefollow.bind(this,UsersState.result[property].id)}>
  <Text>Follow</Text>
</Button> */}
</Right>
{/* <Right style={{paddingTop:10}}>

  </Right> */}
  </ListItem>)

}
return (
 <Container style={styles.container}>
    <Header>
    {/* <Left>
      <Text>Search</Text>
    </Left> */}

    <Body >
      <Item rounded style={{width:"100%",height:35}}>
      <Icon active color='#f39c12' size={24} style={{marginLeft:12}}name='search' />
        <Input placeholder='Search'/>
      </Item>
    </Body>

      {/* <Right>
            <Button style={{backgroundColor:'transparent'}}>
                <Icon style={{color:'#000'}} name="search"   />
            </Button>
      </Right> */}
    </Header>

        {/*End Header*/}


     <Content>



      <List style={{marginTop:15}}>
        {/* <ListItem avatar style={{height:71}}>
          <Left>
            <Thumbnail  source={require('../../../images/profile_1x.png')}   />
          </Left>
          <Body >
            <Text style={{marginTop:15}}>Name</Text>
            <Text note></Text>
          </Body>
          <Right >
          <Button rounded dark>
        <Text>Follow</Text>
      </Button>
      </Right>
      <Right style={{paddingTop:10}}>

        </Right>
        </ListItem> */}
        {GetUersData}
      </List>


     </Content>

      <Footer>
       <FooterTab>
         <Button  >
           <Icon  size={24}name="home" onPress={() =>this.props.navigation.navigate('Home') }/>
         </Button>
         <Button  >
           <Icon color='#f39c12' name="search" size={20}/>
         </Button>
         <Button onPress={() =>this.props.navigation.navigate('Gallery') }>
          <Icon name="plus"size={20} />
        </Button>
         <Button onPress={() =>this.props.navigation.navigate('Following') }>
           <Icon  name="heart" size={20} />
         </Button>
         <Button onPress={() =>this.props.navigation.navigate('Profile') }>
           <Icon  name="user" size={20}/>
         </Button>
       </FooterTab>
     </Footer>

 </Container>
);
 }
 }
const styles = StyleSheet.create({
container:{
    flex: 1,


},
topTabs:{
   borderBottomWidth: 2,
   width:180
},
borderLine:{
    borderWidth: 1,
    marginTop:10,
  marginHorizontal: 40,  
},
 imageStyle:{
 paddingTop: 10,

 },
})

这是我点击之前的输出

，点击后的输出看起来像这样

我想当我单击任何按钮时，只是那个按钮会改变，并不是所有的按钮都对我有帮助

Answer 1

添加另一个状态，例如buttonChangedUserID，然后通过以下方法进行设置

async changebutton(followid){
this.setState({changeButtons:true, buttonChangedUserID:followid })
....

然后使用它来获取选定的用户ID，以在状态更改后呈现按钮时更改按钮

要更改单击的当前按钮

1 个答案: