Question

我有一个子Picker，它应该将选定的值传递给它的父级。如果组件很重要，则组件位于不同的.js文件中。如何通过所选项目的状态？

父

<RegionPicker regions={this.props.navigation.state.params.regionsJSON}/>

子：

export default class RegionPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected1: '1',
      selected2: '1'
        };
  }
  onValueChange1(value: string) {
    this.setState({selected1: value},
                  ()=>{ console.log('new',this.state.selected1)}
    );
  }
  onValueChange2(value: string) {
    this.setState({selected2: value},
                  ()=>{ console.log('new',this.state.selected2)}
    );
  }

    render() {
       return (
         <View>
             <Form>
               <Item inlineLabel>
                 <Label style={{fontSize:16}}>Region</Label>
                 <Picker
                   iosHeader="Select one"
                   mode="dropdown"
                   placeholder='...'
                   selectedValue={this.state.selected1}
                   onValueChange={this.onValueChange1.bind(this)}
                 >
                     {this.getRegions(this.props.regions).map((item, index) => {
                       return (<Picker.Item label={item} value={item} key={index}/>)
                     })}
                 </Picker>
               </Item>
               <Item inlineLabel last>
                 <Label style={{fontSize:16}}>Suburb</Label>
                 <Picker
                   iosHeader="Select one"
                   mode="dropdown"
                   placeholder='...'
                   selectedValue={this.state.selected2}
                   onValueChange={this.onValueChange2.bind(this)}
                 >
                 {this.getSuburbs(this.state.selected1).map((item, index) => {
                   return (<Picker.Item label={item} value={item} key={index}/>)
                 })}

               </Picker>
               </Item>
             </Form>

         </View>
       );
     }
   }

我希望得到任何帮助和想法。

Answer 1

在您的父级中，创建一个捕获 RegionPicker值的函数。在此示例中，myFunction。

myFunction = (value) => {
  console.log(value);
}

然后将您的函数传递为prop，如下所示：

<RegionPicker 
    regions={this.props.navigation.state.params.regionsJSON} 
    onChange={e => { this.myFunction(e) }}
/>

在RegionPicker内，您只需在onValueChange1()和onValueChange2()内调用您的功能。

this.props.onChange(value);

您还应.bind() constructor内的RegionPicker函数。因此，您可以在this.onValueChange1 = this.onValueChange1.bind(this); this.onValueChange2 = this.onValueChange2.bind(this);内添加

this.onValueChange1

然后打电话 Picker onValueChange函数中的{{1}}。

Answer 2

我可以做一件事，你可以在父组件中获取值

onValueChange={()=>{this.props.onValueChange1()}}

在组件中，您调用此函数，以便获得值

<RegionPicker onValueChange1={()=>{this.calculate()}}/>

调用父状态的函数将是

calculate (value: string){
 **Do you logic stuff here **

 }

你现在可以获得价值吗

如何将Picker值传递给React Native中的父组件

2 个答案: