在导入的屏幕中反应本地更改状态

时间:2018-10-28 15:39:06

标签: reactjs react-native

我想更改voiceRecordingScreenVisible中的AudioRecordingScreen值。我该怎么办?

{this.state.voiceRecordingScreenVisible == false ? (
  <View
    style={{
      width: 100 + "%",
      height: 100 + "%",
      position: "absolute",
      zIndex: 20
    }}
  >
    <TouchableOpacity
      style={{
        width: 100 + "%",
        height: 100 + "%",
        position: "absolute",
        backgroundColor: "rgba(0,0,0,0.5)"
      }}
    />
    <View
      style={{
        width: 85 + "%",
        height: 75 + "%",
        position: "absolute",
        top: 40,
        alignSelf: "center"
      }}
    >
      <AudioRecordingScreen
        screenProps={{
          VoiceChatID: this.state.chatID,
          VoiceSenderID: this.state.userID,
          VoiceTableName: "messages",
          VoiceUserToken: this.state.token
        }}
      />
    </View>
  </View>
) : null}

2 个答案:

答案 0 :(得分:1)

您可以执行以下操作:

// Outside render(), function to set value of voiceRecordingScreenVisible
setVoiceRecordingScreenVisible = (value) => {
  this.setState({voiceRecordingScreenVisible: value})
}

// inside render()
{
  this.state.voiceRecordingScreenVisible == false ? 
    <View style={{width:100+"%",height:100+"%",position:"absolute",zIndex:20}}>
      <TouchableOpacity style{{width:100+"%",height:100+"%",position:"absolute",backgroundColor:"rgba(0,0,0,0.5)"}}></TouchableOpacity>
      <View style={{width:85+"%",height:75+"%",position:"absolute",top:40,alignSelf:"center"}}>
        <AudioRecordingScreen screenProps={{
           VoiceChatID:this.state.chatID,
           VoiceSenderID:this.state.userID,                          
           VoiceTableName:"messages",      
           VoiceUserToken:this.state.token,

           // pass function to set the value voiceRecordingScreenVisible
           setVoiceRecordingScreenVisible: this.setVoiceRecordingScreenVisible   
        }}/>
       </View>                
     </View> : null 

}

并在需要的地方在AudioRecordingScreen中调用函数'setVoiceRecordingScreenVisible'this.props.screenProps.setVoiceRecordingScreenVisible

答案 1 :(得分:0)

您应该使用箭头函数解决该问题的关键字,例如setVoiceRecordingScreenVisible:(boolean)=> this.setState({voiceRecordingScreenVisible:boolean}),这里在箭头函数的范围内,它绑定到相同的值已创建箭头功能的位置。参数boolean是您传递给arrow函数的值。