將我的類組件轉換為功能組件的方法是什么？

Question

將我的類組件轉換為功能組件的方法是什么？ 在我的示例中，我嘗試顯示搜索欄，我需要使用函數組件而不是類組件來完成。

import React, { useState} from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
 
const ExampleOne = (props) =>{ 
      const [tableHead, settableHead] = useState(['Head', 'Head2', 'Head3', 'Head4'])
      const [tableData,settableData] = useState([
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '456\n789'],
        ['a', 'b', 'c', 'd']
      ])
  
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={tableData} textStyle={styles.text}/>
        </Table>
      </View>
    ) 

export default ExampleOne 
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
});

Answer 1

也許你可以嘗試如下：

import React, { useState } from 'react';
import { SearchBar } from 'react-native-elements';

const App = () => 
  const [search, setSearch] = useState({
     text: ''
  });

  return {
    return (
      <SearchBar
        placeholder="Type Here..."
        onChangeText={ (search) => setSearch({ text: search }) }
        value={search.text}
      />
    );
  }
}

export default App;

我建議閱讀以下文檔以了解更多詳細信息： Using the State Hook

+1 加成：

我會考慮將const [search, setSearch] = useState('')僅用於您的搜索狀態，因為它更短。 以上述方式，您可以在search狀態中存儲更多信息，但這取決於您是否更適合您的情況。

Answer 2

您使用 React Hook 並將基於類的組件更改為功能組件

import React, { useState } from "react";
import { SearchBar } from "react-native-elements";

const App = () => {
  const [search, setSearch] = useState("");

  const updateSearch = (search) => {
    setSearch(search);
  };

  return (
    <SearchBar
      placeholder="Type Here..."
      onChangeText={(i) => updateSearch(i)}
      value={search}
    />
  );
};

export default App;

Answer 3

import React, { useState } from 'react';
import { SearchBar } from 'react-native-elements';


export default App = () => {
    const [search, setSearch ] = useState('');

    return(
        <SearchBar
        placeholder="Type Here..."
        onChangeText={ search => setSearch(search) }
        value={search}
         />
    );
}