首页 > 解决方案 > 如何将此useffect更改为react native中的类组件?

问题描述

我正在尝试将 useEffect、useState 更改为类组件,但我无法实现。在这里尝试使用多个选择选项做一个下拉选择器。我是反应原生的新手。非常感谢任何帮助。

我一直在尝试使用功能组件中的 react-native-element-dropdown NPM 包。现在尝试从功能组件更改为类组件。

这是代码:

import React, {useState} from 'react';
 import {Dropdown, MultiSelect} from 'react-native-element-dropdown';

const data = [
{label: 'Item 1', value: '1'},
 {label: 'Item 2', value: '2'},
{label: 'Item 3', value: '3'},

 ];

const DropdownScreen = _props => {
const [dropdown, setDropdown] = useState(null);
 const [selected, setSelected] = useState([]);

const _renderItem = item => {
 return (
  <View style={styles.item}>
    <Text style={styles.textItem}>{item.label}</Text>
    <Image style={styles.icon} source={require('./assets/tick.png')} />
  </View>
   );
 };

  return (
  <View style={styles.container}>
  <Dropdown
    style={styles.dropdown}
    data={data}
    search
    searchPlaceholder="Search"
    labelField="label"
    valueField="value"
    placeholder="Select item"
    value={dropdown}
    onChange={item => {
      setDropdown(item.value);
      console.log('selected', item);
    }}
    renderLeftIcon={() => (
      <Image style={styles.icon} source={require('./assets/account.png')} />
    )}
    renderItem={item => _renderItem(item)}
  />

  <MultiSelect
    style={styles.dropdown2}
    data={data}
    labelField="label"
    valueField="value"
    placeholder="Select item"
    search
    searchPlaceholder="Search"
    value={selected}
    onChange={item => {
      setSelected(item);
      console.log('selected', item);
    }}
    renderItem={item => _renderItem(item)}
     />
    </View>
    );
  };

  export default DropdownScreen;

标签: reactjsreact-nativereact-hooks

解决方案


const [dropdown, setDropdown] = useState(null);作为:this.state= {dropdown: null}

setDropdown(item.value);如:`this.setState({dropdown: item.value})


推荐阅读