当组件在函数内部时 material-ui 的奇怪行为

Question

我正在尝试将我的代码拆分为反应功能组件中的更多功能，因此阅读和维护代码更加清晰，即：

import React, { useEffect, useState } from "react";
import { StyledExchangeRateProvider } from "./styles";
import useUpdateRates from "../../hooks/useUpdateRates";
import {
    FormControl,
    InputLabel,
    MenuItem,
    Select,
    TextField
} from "@material-ui/core";

export default function ExchangeRateProvider() {
    // rates hook
    const ratesContext = useUpdateRates();
    const rates = ratesContext.state.rates;

    // update rate on component did mount
    useEffect(() => {
        async function updateRates() {
            if (!rates) {
                await ratesContext.updateRate();
            }
        }
        updateRates();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    // save input values
    const [values, setValues] = useState({
        country: "VES",
        amount: "",
        total: ""
    });

    // change values
    const handleChange = event => {
        setValues({
            ...values,
            [event.target.name]: event.target.value
        });
    };

    function Amount() {
        return (
            <TextField
                name="amount"
                variant="filled"
                label="Amount"
                onChange={handleChange}
                value={values.amount}
                fullWidth
            />
        );
    }

    function Country() {
        return (
            <FormControl fullWidth variant="filled" className="input">
                <InputLabel id="Country">Country</InputLabel>
                <Select
                    labelId="Country"
                    id="country"
                    name="country"
                    value={values.country}
                    onChange={handleChange}
                >
                    <MenuItem value="ARS">Argentina</MenuItem>
                    <MenuItem value="BRL">Brazil</MenuItem>
                    <MenuItem value="INR">India</MenuItem>
                    <MenuItem value="VES">Venezuela</MenuItem>
                    <MenuItem value="ZAR">South Africa</MenuItem>
                </Select>
            </FormControl>
        );
    }

    return (
        <StyledExchangeRateProvider>
            <Amount />
            <Country />
        </StyledExchangeRateProvider>
    );
}

在此代码中，我在函数中分离了我将在此组件中呈现的内容，因此，即Amount函数返回一个material-ui TextField。 它会返回更多的东西，但为了这个问题的简单性，我们只考虑这个。

此代码呈现良好，并显示所有元素。 但是，当我在 TextField 中键入内容时，光标会在我键入每个字符时从 TextField 移开。

如果我将<TextField... />移离Amount函数并将其直接放在 React Component 返回中（将<Amount />切换为<TextField... /> ），TextField 工作正常。

我制作了一个具有以下行为的 CodeSandBox： https ://codesandbox.io/s/dreamy-brattain-r4irj

我的问题是：为什么会发生这种情况以及如何修复它以保持代码在函数中分离？

Answer 1

将 Amount 和 Country Components 移到 ExchangeRateProvider 之外，并通过 props 传递数据。 问题是因为在每次渲染时都会重新创建函数