Asked Apr 22nd, 3:35 AM 60 0 1
  • 60 0 1
+1

how to set style when onpress change state in react native

Share
  • 60 0 1

https://snack.expo.io/@dongcv/our-first-navigate-v3

các anh chị ơi em muốn set style khi state có thay đổi mà chưa tìm ra Mong các a chị chỉ giáo Em Xin Cảm Ơn !! ^_^

1 ANSWERS


Answered Apr 22nd, 3:50 AM
Accepted
0

theo mình hiểu là bạn đang muốn khi click vào item nào thì item đó opacity sẽ thành 1 đúng không nhỉ? Bạn thử viết state trong constructor nhá.

constructor(super) {
        this.state = {
             your_county:  0
        }
} 

và sự kiện click bạn nên cho nó thành 1 function nhá, function sẽ không cần render lại 1 function khác.

_onClick = (index) = () => {
       this.setState({your_coutry : index)}
}
 <TouchableHighlight onPress={this._onClick(item.index)} ....
Share
Apr 22nd, 4:08 AM

"click vào item nào thì item đó opacity sẽ thành 1" đúng rồi anh ạ em thử các của anh rồi nhưng nó vẫn vậy ạ , vấn đề của em là State đã thay đổi nhưng style k đổi ạ

0
| Reply
Share
Apr 22nd, 4:29 AM

Nãy mình nhìn nhầm :v, bạn xem lại đoạn code này nhá, bởi vì renderItem chỉ render 1 lần lúc mới render, nên nó sẽ chỉ có state ban đầu và không thay đổi, bạn hãy truyền cho nó 1 props nhá

export default class Country extends Component {
  constructor(props) {
    super(props)
    this.state = {
      your_county: 2
    }
  }

  _onClick = (index) => () => {
    this.setState({your_county: index})
  }

  render() {
      return (
          <View style={ViewCss.container}>
              <View style={ViewCss.header} >
                  <Text style={ViewCss.h3text}>
                      Choose your country {this.state.your_county}
                  </Text>
              </View>
              <FlatList
                  data={data}
                  style={ViewCss.flatList}
                  itemSelected={this.state.your_county}
                  numColumns={2}
                  renderItem={this.renderItem()}
              />
          </View>
      );
  }

  renderItem = () => (item) => {
      return (
          <View style={itemCss.item}>
              <TouchableHighlight onPress={this._onClick(item.item.index)} underlayColor="white">
            <View style={[itemCss.row, this.state.your_county == item.item.index ? itemCss.highlight : itemCss.row]} >
                      <Text style={itemCss.text}>{item.item.key}</Text>
                  </View>
              </TouchableHighlight>
          </View>
      );
  };
}

0
| Reply
Share
Apr 22nd, 4:45 AM

@longnk1301 <View style={[itemCss.row,this.state.your_county === item.item.index ? itemCss.highlight : itemCss.row]} > thanks anh nhiều ạ

0
| Reply
Share