react native：在我的示例中，将类组件更改为功能组件的方法是什么？答案

【问题标题】：react native : what is the way to change class component to function component in my example?react native：在我的示例中，将类组件更改为功能组件的方法是什么？
【发布时间】：2020-11-23 07:20:10
【问题描述】：

在我的示例中将类组件更改为功能组件的方法是什么？在我的示例中，我尝试将其更改为功能组件，但它不起作用，我很乐意为这个问题提供一些帮助。

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    const { firstQuery } = this.state;
    return (
      <Searchbar
      style={{marginTop: 60}}
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={firstQuery}
      />
    );
  }
}

【问题讨论】：

具体是什么不起作用？请提供Minimal, Complete, and Reproducible 代码示例，说明您尝试将基于类的组件转换为功能组件。除了更新firstQuery 状态，你还能做什么？

标签： reactjs function react-native react-hooks

【解决方案1】：


import  React, {useState} from 'react';
import { Searchbar } from 'react-native-paper';

const MyComponent =()=> {
  const [firstQuery, setFirstQuery] = useState("");

    return (
      <Searchbar
      style={{marginTop: 60}}
        placeholder="Search"
        onChangeText={query => { setFirstQuery(query ) }}
        value={firstQuery}
      />
    );
  
}

export default MyComponent;

【讨论】：

【解决方案2】：

这样做

const MyComponent = () => {
  const [firstQuery, setFirstQuery] = useState('');
  
  const _onChange = query => setFirstQuery(query); 
  
  return (
    <Searchbar
      style={{marginTop: 60}}
      placeholder="Search"
      onChangeText={_onChange}
      value={firstQuery}
    />
  );
}

【讨论】：

【解决方案3】：

const MyComponent = () => {
  const [firstQuery, setFirstQuery] = useState('');
  
  const handleChange = (query) => setFirstQuery(query); 
  
  return (
    <Searchbar
      style={{marginTop: 60}}
      placeholder="Search"
      onChangeText={handleChange}
      value={firstQuery}
    />
  );
}

【讨论】：

【解决方案4】：

试试这个方法

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

const MyComponent = (props) => { 

  const [firstQuery, setFirstQuery] = React.useState(''); 
     
    return (
     <Searchbar
        style={{marginTop: 60}}
        placeholder="Search"
        onChangeText={query => { setFirstQuery(query) }}
        value={firstQuery}
      />
    );
}

export default MyComponent;

【讨论】：

【解决方案5】：

这应该为你做：

//Only get what we need to reduce overhead
import React, { useState } from "react";
import { Searchbar } from "react-native-paper";

//you may include props here if needed, otherwise = () =>
const MyComponent = (props) => {
  
  //State as hook, first object in array will be value second will be function to set value and notify update required
  const [firstQuery, setFirstQuery] = useState("");
  
  //handle for onChangeText
  const onChangeTextHandle = (query) => {
    //set state using hook
    setFirstQuery(query);
  };

  //No need for render method, just return JSX
  return (
    <Searchbar
      style={{ marginTop: 60 }}
      placeholder="Search"
      onChangeText={onChangeTextHandle}
      value={firstQuery}
    />
  );
};

//Export component Here
export default MyComponent;

【讨论】：