Question

如何根据React-Native中其他选择器的选择重新呈现选择器项目？

var options = [＆＃34; Home＆＃34;，＆＃34; Savings＆＃34;，＆＃34; Car＆＃34;，＆＃34; GirlFriend＆＃34;];

this.state = {

  selected_picker_1: "",
  selected_picker_2: "",

}

    onValueChangePicker1(value) {
      this.setState({
        selected_picker_1: value
      });
    }


    onValueChangePicker2(value) {
      this.setState({
        selected_picker_2: value
      });
    }


        <Picker 

          mode="dropdown"

          placeholder="Select One"

          style={{ width: undefined,backgroundColor:"white",marginTop:5}}
          selectedValue={this.state.selected_picker_1}
          onValueChange={this.onValueChangePicker1.bind(this)}>


          {options.map((item, index) => {
            return (<Picker.Item label={item} value={item} key={item}/>) 
        })}

        </Picker>







      <Picker 

          mode="dropdown"

          placeholder="Select One"

          style={{ width: undefined,backgroundColor:"white",marginTop:5}}
          selectedValue={this.state.selected_picker_2}
          onValueChange={this.onValueChangePicker2.bind(this)}>




          {cluster.map((item, index) => {

            renderIf(item.key===this.state.selected_picker_1) 
            {

              return(


           <Picker.Item label={item.item} value={index} key={index}/>


          )

            }



       })}



        </Picker>

//我需要重新渲染第二个选择器，只包含带有键＆＃39; Home＆＃39;当选择＆＃39; Home＆＃39;在第一个选择器上。

Answer 1

由于您未提供任何细节。这是我假设的。您的第二个选择器值（根据选择需要更改的值）取决于第一个。

首先，您需要确定哪些选择器值是相关的。之后可以将相关值分配给状态。设置完成后，第一个选择器将根据各种选择更新状态，然后您的第二个选择器将自动更新这些值。

这将是一般性问题的一般答案：）

修改

您在renderIf(item.key===this.state.selected_picker_2)检查错误的值。您的第一个选择器会将值设置为this.state.selected_picker_1，而您显示的结果则基于this.state.selected_picker_2。

您的情况应更改为renderIf(item.key===this.state.selected_picker_1)

编辑2

this的范围在map的回调函数中不可用。在const instance = this;方法中将常量定义为render。并将您的条件更改为renderIf(item.key===instance.state.selected_picker_1)

Answer 2

通过此链接解决 https://github.com/GeekyAnts/NativeBase/issues/636

const items = [＆＃39; Simon Mignolet＆＃39; Nathaniel Clyne＆＃39;，＆＃39; Dejan Lovren＆＃39; Mama Sakho＆＃39;，＆＃39; ; Emre Can＆＃39;];

var BUTTONS = [ ＆＃39;选项0＆＃39;，＆＃39;选项1＆＃39;，＆＃39;选项2＆＃39;，＆＃39;删除＆＃39 ;, ＆＃39;取消＆＃39 ;, ];

export default class testBase2 extends Component {

构造函数（道具）{

super(props);
this.state = {

  selected1: 'key1'

}

}

getItems（val）{

if (val === 'key1')

{

return items;

}

else {

  return BUTTONS;

}

}

onValueChange（value）

{

 this.setState({

 selected1 : value

 });

}

onValueChange2（value）

{

this.setState（{

selected2 : value

}）;

}

render（）{

return (

    <Container>
      <Header>
        <Left>
          <Button transparent>
            <Icon name="heart" size={20} color='red' />
          </Button>
        </Left>
        <Body>
          <Title>Hello</Title>
        </Body>
        <Right />
      </Header>
      <Content padder>
        <Picker
            iosHeader="Select one"
            mode="dropdown"
            selectedValue={this.state.selected1}
            onValueChange={this.onValueChange.bind(this)}>
            <Item label="Wallet" value="key0" />
            <Item label="ATM Card" value="key1" />
            <Item label="Debit Card" value="key2" />
            <Item label="Credit Card" value="key3" />
            <Item label="Net Banking" value="key4" />
       </Picker>
       <Picker
           iosHeader="Select one"
           mode="dropdown"
           defaultLabel={"waiting"}
           selectedValue={this.state.selected2}
           onValueChange={this.onValueChange2.bind(this)}>
           {this.getItems(this.state.selected1).map((item, i) => {
             console.log('item', item);
            return <Item label={item} key={`${i}+1`} value={i} />
           })}
      </Picker>
      </Content>
    </Container>
);

} }

根据React-Native中另一个选择器的选择重新渲染选择器项目？

2 个答案: