从自定义组件反应本机更改状态 [英] React Native Change State from Custom Component

问题描述

我有自定义选择器组件，我想更新selectedValue和onValueChange事件的状态.如果我直接在渲染部分中添加选择器，则效果很好，但是由于代码重复，我决定将选择器转换为自定义组件.所以我这样做是这样的:

    import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Modal,
    ActivityIndicator
} from 'react-native';
import { Item, Picker } from 'native-base'

const CustomPicker = props => {
    const {
        pickerLabel,
        selectedVal,
        onChangeVal,
        pickerStyle,
        pickerData,
        ...attributes
    } = props;

    return (
        <Picker
            selectedValue={selectedVal}
            style={[pickerStyle]}
            onValueChange={(itemValue, itemIndex) => this.setState({onChangeVal: itemValue})}>
            <Picker.Item label={pickerLabel} value={''}/>
            {pickerData.map((item, key) => (
                <Picker.Item label={item} value={item} key={key}/>)
            )}
        </Picker>
    )
}

const styles = StyleSheet.create({

});

export default CustomPicker;

我像这样调用其他组件:

<CustomPicker pickerLabel={"Select User"} selectedVal={this.state.selectedUser} pickerStyle={styles.picker} pickerData={this.state.userList} onChangeVal={this.state.selectedUser} />

标签+数据很好地填充在选择器中，但是事件出现了.它在选择数据时未更新状态，我缺少什么?

解决方案

您需要在父组件中创建一个函数来更改值，因为您试图更改stateless component中的state

相反，您需要做的是

父组件

onChange = (itemValue, itemIndex) => {
  // Set the state here and update as required
}

<CustomPicker pickerLabel={"Select User"} selectedVal={this.state.selectedUser} pickerStyle={styles.picker} pickerData={this.state.userList} onChangeVal={this.onChange} />

子组件

onValueChange={onChangeVal}>

用于多个选择器:

父组件

state = {
  user: [
         {value: 'Something', key: 0, label: 'Select User', userList: [//...Some Array here]},
         {value: 'Something Else', key: 1, label: 'Dont Select User', userList: [//...Some Array here]}
    ]
}

onChange = (itemValue, itemIndex, pickerIndex) => {
      // Update the states based on the pickerIndex
    }

const {user} = this.state

// Use a map here

user.map((data, index) => (
      <CustomPicker key={index} index={index} pickerLabel={data.label} selectedVal={data.value} pickerStyle={styles.picker} pickerData={data.userList} onChangeVal={this.onChange} />
))

子组件

const {
        index, <== Picker Index
        pickerLabel,
        selectedVal,
        onChangeVal,
        pickerStyle,
        pickerData,
        ...attributes
    } = props;

<Picker
            selectedValue={selectedVal}
            style={[pickerStyle]}
            onValueChange={(itemValue, itemIndex) => this.props.onChangeVal(itemValue, itemIndex, index)}> <== Pass picker value to the parent 

I have custom picker component and i want to update states on selectedValue and onValueChange event. It works fine if i add picker directly in render section but due to duplication of code i decided to convert my pickers into custom component. So i did it like this:

    import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Modal,
    ActivityIndicator
} from 'react-native';
import { Item, Picker } from 'native-base'

const CustomPicker = props => {
    const {
        pickerLabel,
        selectedVal,
        onChangeVal,
        pickerStyle,
        pickerData,
        ...attributes
    } = props;

    return (
        <Picker
            selectedValue={selectedVal}
            style={[pickerStyle]}
            onValueChange={(itemValue, itemIndex) => this.setState({onChangeVal: itemValue})}>
            <Picker.Item label={pickerLabel} value={''}/>
            {pickerData.map((item, key) => (
                <Picker.Item label={item} value={item} key={key}/>)
            )}
        </Picker>
    )
}

const styles = StyleSheet.create({

});

export default CustomPicker;

I call on different component like this:

<CustomPicker pickerLabel={"Select User"} selectedVal={this.state.selectedUser} pickerStyle={styles.picker} pickerData={this.state.userList} onChangeVal={this.state.selectedUser} />

Label + data is populating in picker nicely but issue is coming on events. Its not updating state on picking data, What am i missing?

解决方案

You need to make a function in the parent component to change the values, since you're trying to change the state in a stateless component

Instead what you need to do is

Parent Component

onChange = (itemValue, itemIndex) => {
  // Set the state here and update as required
}

<CustomPicker pickerLabel={"Select User"} selectedVal={this.state.selectedUser} pickerStyle={styles.picker} pickerData={this.state.userList} onChangeVal={this.onChange} />

Child Component

onValueChange={onChangeVal}>

For Multiple Pickers :

Parent Component

state = {
  user: [
         {value: 'Something', key: 0, label: 'Select User', userList: [//...Some Array here]},
         {value: 'Something Else', key: 1, label: 'Dont Select User', userList: [//...Some Array here]}
    ]
}

onChange = (itemValue, itemIndex, pickerIndex) => {
      // Update the states based on the pickerIndex
    }

const {user} = this.state

// Use a map here

user.map((data, index) => (
      <CustomPicker key={index} index={index} pickerLabel={data.label} selectedVal={data.value} pickerStyle={styles.picker} pickerData={data.userList} onChangeVal={this.onChange} />
))

Child Component

const {
        index, <== Picker Index
        pickerLabel,
        selectedVal,
        onChangeVal,
        pickerStyle,
        pickerData,
        ...attributes
    } = props;

<Picker
            selectedValue={selectedVal}
            style={[pickerStyle]}
            onValueChange={(itemValue, itemIndex) => this.props.onChangeVal(itemValue, itemIndex, index)}> <== Pass picker value to the parent 

这篇关于从自定义组件反应本机更改状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！