时间戳

首页 > 解决方案 > 反应原生选择器包装组件

react-native - 反应原生选择器包装组件

问题描述

子组件

  <View style={{flex:1}}>
  <Picker
      selectedValue={this.props.questions}
      onValueChange={}//I do not know how to write here
      // onValueChange={(value) => this.setState({questions1 :value})}
      mode="dropdown"
      style={{color:'#f00'}}
      >
      <Picker.Item label="1" value="1"/>
      <Picker.Item label="2" value="2"/>
      <Picker.Item label="3" value="3"/>
      <Picker.Item label="4" value="4"/>
    </Picker>
  </View>

父组件

render() {
    var items=[];
    for (var i = 0; i < myData.length; i++) {
      this.state["questions"+i]=1
      items.push(
        <SelectValue            
        questions={this.state['questions'+i]}>
        </SelectValue>
      )
    }
    return (        
          {items}
    )

现在我不知道如何编写 onValueChange={}。我希望可以重用子组件（选择器）。So when the picker's value change the parent state also change, that what I want

标签： react-native

解决方案

从父组件中，您可以将函数作为道具传递。

    render() {
      var items=[];
      for (var i = 0; i < myData.length; i++) {
       this.state["questions"+i]=1
       items.push(
        <SelectValue            
           onValueChange={(value) => this.setState({["questions"+i]:value})}
           questions={this.state['questions'+i]}>
        </SelectValue>
      )
     }
     return ({items})
  }

在子组件中

<View style={{flex:1}}>
  <Picker
      selectedValue={this.props.questions}
      onValueChange={this.props.onValueChange}
      mode="dropdown"
      style={{color:'#f00'}}
      >
      <Picker.Item label="1" value="1"/>
      <Picker.Item label="2" value="2"/>
      <Picker.Item label="3" value="3"/>
      <Picker.Item label="4" value="4"/>
    </Picker>
  </View>

推荐阅读