时间戳

首页 > 解决方案 > > FormControl里面有多个InputBase组件

reactjs - > FormControl里面有多个InputBase组件

问题描述

我有一个问题：

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>

标签： reactjstypescriptmaterial-ui

解决方案

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

推荐阅读