Question

我试图显示/隐藏我的输入字段在react Native中，首先我将showFilters的状态设置为true，然后在我的函数中将其设置为false ...像这样...

hide(){
        console.log("hello");
        this.setState({showFilters: false}); 
      }

这是我的this.state ...

constructor() {

        super();

        this.state = {
            showFilters:true,
            radioButtons: [
            {
              label: 'Freelancer',
              value: 'freelancer',
              checked: true,
              color: '#323232',
              disabled: false,
              onPress: this.hide(),
              size: 11

            },

        {
          label: 'Jobs',
          value: 'jobs',
          checked: false,
          color: '#323232',
          disabled: false,
          size: 11

        },
        {
          label: 'Employer',
          value: 'employer',
          checked: false,
          color: '#323232',
          disabled: false,           
          size: 11   
        } ]

我想在按下单选按钮时隐藏布局...

{ this.state.showFilters   ?
                <TextInput style={{fontSize:17 , height:45}}  editable = {true} placeholder="Hello"></TextInput> : null
            }

终端显示问候消息，但未更改状态。显示警告...

Warning: Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};`

这是单选按钮代码

render(){
        let selectedItem = this.state.radioButtons.find(e => e.checked == true);
        selectedItem = selectedItem ? selectedItem.value : this.state.radioButtons[0].value;
        return(
            <View style={styles.container}>
            <Header style ={{shadowRadius: 0,shadowOffset: {height: 0,},}}
            backgroundColor="#ff5851"
            androidStatusBarColor="#ff5851"
            leftComponent={{ icon: 'menu', color: '#fff' }}
            centerComponent={{ text: 'Start Your Search', style: { color: '#fff',fontWeight:'500', fontSize:20 , width:'100%',fontSize:20, paddingTop:9 ,display:'flex', flexDirection:'column', alignItems:'center'  , justifyContent:'center' , height:40 , borderRadius:20 , alignSelf:'center' , textAlign:'center'  } }}
              />
            <ScrollView>
            <Text style={{fontWeight: '600' , marginBottom:10 , color:'#323232' ,fontWeight:'500', fontSize:20 , marginLeft:10 , marginTop:10 , marginBottom:15 , marginTop:15 }}>Narrow Your Search</Text>
            <View style={{flexDirection:'column' , backgroundColor:'#fff' , paddingLeft:10}}>
            <View style={{borderBottomColor: '#dddddd', borderBottomWidth: 0.6 , marginLeft:-10  , marginBottom:10}}/>
            <Text style={{ marginBottom:10 }}>Narrow Your Search</Text>
            <RadioGroup style={{marginBottom:10 , flexDirection:'row'}}
            color='#ff5851'
            labelStyle={{ fontSize: 14, }}
            radioButtons={this.state.radioButtons}
            onPress={radioButtons => this.setState({ radioButtons })}
            style={{ paddingTop: 20 }}
            />

Answer 1

首先在构造函数中摆脱onPress: this.hide()。像这样：

super();
        this.state = {
          showFilters:true,
          data: [
          {
            label: 'Freelancer',
            value: 'freelancer',
            checked: true,
            color: '#323232',
            disabled: false,
            size: 11

          },

          {
            label: 'Jobs',
            value: 'jobs',
            checked: false,
            color: '#323232',
            disabled: false,
            size: 11

          },
          {
            label: 'Employer',
            value: 'employer',
            checked: false,
            color: '#323232',
            disabled: false,           
            size: 11   
          } ],
        };

然后编写onPress函数而不是隐藏函数

onPress = data => {
  let selectedButton = data.find(e => e.selected == true);
  selectedButton = selectedButton ? selectedButton.value : 
     this.state.data[0].label;

  if (selectedButton === 'freelancer') {
    this.setState({ data, showFilters: false });
  } else {
    this.setState({ data, showFilters: true });
  }
}

最后一次使用渲染功能，请尝试以下操作：

<RadioGroup style={{marginBottom:10 , flexDirection:'row'}}
        color='#ff5851'
        labelStyle={{ fontSize: 14, }}
        radioButtons={this.state.data}
        onPress={this.onPress}
        style={{ paddingTop: 20 }}
/>

代码正在我的计算机上运行。点击自由职业者单选按钮时，showfilter更改为假值。

只需尝试一下。

Answer 2

将onPress: this.hide(),更改为onPress: this.hide。您编写了onPress: this.hide()，因此在构造函数中调用了this.hide（）。

Answer 3

哈吉米

constructor() {

        super();

        this.state = {
            radioButtons: [
            {
              label: 'Freelancer',
              value: 'freelancer',
              checked: true,
              color: '#323232',
              disabled: false,
              onPress: this.hide(),
              size: 11

            },
            // your code ......
           ]
         }
    this.showFilters = true
   }

hide(){
        this.showFilters =  false
      }

和布局

{ this.showFilters   ?
                <TextInput style={{fontSize:17 , height:45}}  editable = {true} placeholder="Hello"></TextInput> : null
            }

尝试使用this.showFilters

谢谢

Answer 4

您可以通过回调调用setState并传递以前的状态：

setState(prevState => {
   showfilter: !prevState.showFilters
})

setState（{}）并未更改我的布尔值在React Native应用中

4 个答案: