1
州の値に小道具の値をどのように割り当てることができますか?React Native:状態に小道具の値を割り当てる
たとえば、以下のコンポーネントは、親コンポーネントからいくつかの値を小道具として取得します。このLogItem
コンポーネントに渡さ
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Logitem extends Component {
constructor(props) {
super(props);
const { logstringdate, bmi, weight, logdate } = this.props;
}
state = {
selecteddate: '',
selectedweight: ''
}
onWeightClick =() => {
this.setState({ selecteddate: this.props.logdate });
console.log('Value in props==>'+this.props.logdate);
console.log('The selecteddate in the state ==> '+ this.state.selecteddate);
}
render() {
return (
<View style={styles.containerStyle}>
<View style={styles.headerContentStyle}>
<Text>{this.props.logstringdate}</Text>
<Text>{this.props.bmi}</Text>
</View>
<View style={styles.thumbnailContainerStyle}>
<Text onPress={this.onWeightClick}>{this.props.weight}</Text>
</View>
</View>
);
}
};
const styles = {
containerStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2},
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop:10,
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
marginLeft: 10,
marginRight: 10,
flexDirection: 'row'
},
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
};
小道具logstringdate, bmi, weight, logdate
あります。
私はプレスイベントで状態(selecteddate
)を設定しています。
イベントはトリガーされていますが、何らかの理由でthis.setState
が機能していません(つまり、状態の値を小道具に割り当てていない)。
私は小道具が実際に渡され、それがヌルではないことを確認しました。
マイ出力
コンストラクタの内部で '' onWeightClick結合しusre作り、 'this.state'内部のコンストラクタを移動し、SETSTATEが非同期 – Aaqib
@AaqibあるようonWeightClick''へのコールバック関数を渡す:私は問題があると確認していませんハンドラ。ハンドラが呼び出されており、 "=()=>"はバインドするのにかなり同じです(afaik) –
明示的に 'bind'の矢印関数を使う必要はありません。クラスインスタンス)。 –