Question

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

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

代码如下：

index = df.index

condition1= df["main"] == "march"

condition2= df["main"] == "august"

row1 = index[condition1]
row2 = index[condition2]
i = row1.tolist()
j = row2. tolist()
df. iloc[i:j]

Answer 1

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

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

Answer 2

这是整个组件；（使用图标而不是你的图片只是为了演示）；

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

注意变化；

首先我定义了一个状态。
访问状态this.state.state_key。改变状态this.setState({state_key: new_value})
_renderItem 现在不是函数而是这个类的方法。因此，要访问它，请使用 this._renderItem()
最后我们需要 render 方法来渲染事物。

如何在 react native 中将此 useffect 更改为类组件？

2 个答案: