2017-12-22 3 views
1

AlertBarのテキストを切り替えるボタンがホーム画面にあります。小道具を「原住民」の州に渡す?

ボタンを押したときに、のテキストが状態isParkedに従って変更される必要があります。現在、私がボタンを押すと、何も起こらない...と私はなぜ不明です。ここで

は私のホームスクリーンです:

class Home extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      isParked: false 
     };  
    } 


    pressPark =() => this.setState({isParked:true}) 

    render() { 
     console.ignoredYellowBox = ['Remote debugger']; 

     return (

      <View> 
        <View> 
         <AlertBar isParked={this.state.isParked}/> 
        </View> 

        <View style={styles.parkButton}> 
         <Button title='PARK' onPress={this.pressPark} color='green'/> 
        </View> 
      </View> 

      ); 
     } 
    } 

は、ここに私のAlertBar.jsです:

class AlertBar extends Component { 

     state = { 
      region: 'Singapore', 
      isParked: this.props.isParked, 
      alertText: null 
    } 


... some unrelated code ... 

    componentDidMount() { 

     if (this.state.isParked === false) { 
       this.setState({alertText: "You're parking at"})} else if (this.state.isParked === true) { 
       this.setState({alertText: "You're parked at"})} 

     alert(this.state.alertText) 
      } 

    componentWillUnmount() { 
     // some unrelated code 
    } 

    render() { 

... some unrelated code... 

     return(

       <View style={styles.container}> 
        <Text style={styles.welcomeText}> 
         {this.state.alertText} 
        </Text> 
        <Text style={styles.locationText}> 
         {this.state.region} 
        </Text> 
       </View> 
      ) 
    } 
} 

私はこの間違っているのでしょうか?私は何が間違っているのか分からない....助けてください!ありがとう!この時点で

答えて

2

使用

if (this.props.isParked === false) 

代わりの

if (this.state.isParked === false) 

(これはとにかく意味をなさない:)、直接状態への転送の小道具いけない)

0

、あなたのAlertBarコンポーネントがあります小道具の変更を処理しない。

更新が受信されるたびに、あなたの小道具を状態にマッピングします。

AlertBar.jsにこのコード行を追加すると、isParkedが更新を受け取るたびに状態にマッピングされます。

componentWillReceiveProps(props) { 
    this.setState({ isParked: props.isParked }); 
} 
関連する問題