Question

子组件

  <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 = {}。我希望子组件（picker）可以重用。因此，当选择器的值改变时，父状态也会改变，这就是我想要的

Answer 1

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

    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>

反应原生拣货包装组件

1 个答案: