Question

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

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

将金额和国家/地区组件移动到ExchangeRateProvider之外，并通过道具传递数据。问题是因为在每个渲染器上都在重新创建功能

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

1 个答案: