> FormControl 内部有多个InputBase组件

Question

我有一个问题：

Material-UI：一个FormControl内部有多个InputBase组件。不支持此操作。它可能会导致无限渲染循环。只使用一个InputBase。

我明白这是什么意思，但我确实需要表单中的两个输入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import {Button, FilledInput} from "@material-ui/core";

export interface InputValues {
    input1?: string;
    input2?: string;
}

export interface InputProps {
    value: InputValues;
}

export const Input = ({value}: InputProps) => {
    return <div>
        <DependenciesExpressionRow value={value.input1 || ""}/>
        <DependenciesExpressionRow value={value.input2 || ""}/>
        <Button>
        </Button>
    </div>;
};

export interface RowProps {
    value: string;
}

const DependenciesExpressionRow = ({value}: RowProps) => {
    return <div>
        <FilledInput key={value} value={value} multiline rows={5} fullWidth/>
        <Button>

        </Button>
    </div>;
};

我把它称为：

<FormControl>
    <Input value={{input1: expression1Field.value, input2: expression2Field.value}}/>
</FormControl>

Answer 1

我知道这似乎不是一个好的答案。然而，文档和 github 上提出的问题没有明确的指导！我的解决方法只是用一个<FormControl />组件包装输入元素。它已经停止了警告，没有任何副作用。请记住，我的表单组件都是通过Reactjs状态控制的，因此，我认为这个解决方案没有问题。