来自自定义组件的 React Native Change State

Posted 2023-02-23

【中文标题】来自自定义组件的 React Native Change State

【英文标题】：React Native Change State from Custom Component

【发布时间】：2018-09-30 21:18:48

【问题描述】：

我有自定义选择器组件，我想更新 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 />

标签 + 数据很好地填充到选择器中，但问题出现在事件上。它没有更新拾取数据的状态，我错过了什么？

【参考方案1】：

您需要在父组件中创建一个函数来更改值，因为您试图更改 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 

【讨论】：

有没有其他方法可以做到这一点，而无需制定方法。因为我在屏幕上有 8-9 个选择器，并且通过使用您的方法，我必须制作 8-9 个方法。

你不需要做8个9的方法，你可以在initialState中做一个值数组，并根据当前选择的Picker的索引来更新它们

我不喜欢这种方法。还有什么办法吗？我可以直接作为道具传递给组件吗

你总是可以直接作为 props 传递给组件，但不能更新它，因为值需要传递给父组件。其他方法是使用 redux。

您能详细说明一下如何处理具有多个状态的多个选择器吗？ onChange 方法如何区分不同的选择器，你能提供一个例子吗？