如何将此useffect更改为react native中的类组件？ [关闭]

Question

我正在尝试将 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;

Answer 1

这是整个组件； （使用图标而不是您的图像仅用于演示）；

import React from 'react';
import { Dropdown, MultiSelect } from 'react-native-element-dropdown';
import { View, Text } from 'react-native';
import { IconButton } from 'react-native-paper';

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

class DropdownScreen extends React.Component {
  state = {
    dropdown: null,
    selected: []
  }


  _renderItem = (item) => {
      <View>
        <Text>{item.label}</Text>
        <IconButton icon="account" size={20} />
      </View>
  };

render() {

  return (
    <View>
      <Dropdown
        data={data}
        search
        searchPlaceholder="Search"
        labelField="label"
        valueField="value"
        placeholder="Select item"
        value={this.state.dropdown}
        onChange={(item) => {
          this.setState({dropdown: item.value});
          console.log('selected', item);
        }}
        renderLeftIcon={() => <IconButton icon="eye" size={20} />}
        renderItem={(item) => this._renderItem(item)}
      />

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

export default DropdownScreen

注意变化；

1. 首先我定义了一个状态。

2. 访问状态this.state.state_key。更改状态this.setState({state_key: new_value})

3. _renderItem 现在不是一个函数，而是这个类的一个方法。所以要访问它，请使用this._renderItem()

4. 最后我们需要render 方法来渲染东西。

Answer 2

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

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