如何将 Class 组件转换为 React 中的功能组件？

Question

import React, { PureComponent, Fragment } from 'react';

class Practice extends PureComponent {

  state = {

    options: [
      {
        name: 'Select…',
        value: null,
      },
      {
        name: 'Rui',
        value: 3000,
      },
      {
        name: 'Catla',
        value: 3000,
      },
      {
        name: 'Carpio',
        value: 3000,
      },
      {
        name: 'Tilapia',
        value: 1750,
      },
      {
        name: 'Mrigel',
        value: 3000,
      },
      {
        name: 'Pabda',
        value: 3500,
      },
      {
        name: 'Koi',
        value: 750,
      },
    ],
    value: '?',
  };

  handleChange = (e) => {

    this.setState({ value: e.target.value });
  };

  render() {
    const { options, value } = this.state;

    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <p>Oxygen Demand: {value}</p>
      </Fragment>
    );
  }
}

export default Practice;

Answer 1

Use useState to handle state of options and value Use useCallback to handle change events on select field Return your rendered JSX

import React, { useState } from "react";

function Practice() {
  const [options, setOptions] = useState([
    {
      name: "Select…",
      value: null,
    },
    {
      name: "Rui",
      value: 3000,
    },
    {
      name: "Catla",
      value: 3000,
    },
    {
      name: "Carpio",
      value: 3000,
    },
    {
      name: "Tilapia",
      value: 1750,
    },
    {
      name: "Mrigel",
      value: 3000,
    },
    {
      name: "Pabda",
      value: 3500,
    },
    {
      name: "Koi",
      value: 750,
    },
  ]);
  const [value, setValue] = useState("?");

  const handleChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  return (
    <>
      <select onChange={handleChange} value={value}>
        {options.map((item) => (
          <option key={item.value} value={item.value}>
            {item.name}
          </option>
        ))}
      </select>
      <p>Oxygen Demand: {value}</p>
    </>
  );
}

export default Practice;

Answer 2

Convert like this:

import React, { useState, PureComponent, Fragment } from 'react';

let Practice = (praps) =>
let [options,soptions] = useState([
  {
    name: 'Select…',
    value: null,
  },
  {
    name: 'Rui',
    value: 3000,
  },
  {
    name: 'Catla',
    value: 3000,
  },
  {
    name: 'Carpio',
    value: 3000,
  },
  {
    name: 'Tilapia',
    value: 1750,
  },
  {
    name: 'Mrigel',
    value: 3000,
  },
  {
    name: 'Pabda',
    value: 3500,
  },
  {
    name: 'Koi',
    value: 750,
  },
]);
let [value,svalue]=useState('?')

let handleChange = (e) => {

svalue(e.target.value);

};

render() {

return (
  <Fragment>
    <select onChange={this.handleChange} value={value}>
      {options.map(item => (
        <option key={item.value} value={item.value}>
          {item.name}
        </option>
      ))}
    </select>
    <p>Oxygen Demand: {value}</p>
  </Fragment>
);

} }

export default Practice;