> FormControl 中有多个 InputBase 组件

Question

我有一个问题：

MaterialUI:FormControl。不支持此操作。它可能会导致无限渲染循环。只使用一个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状态控制的，因此，我认为这个解决方案没有问题。

Answer 2

我也遇到了同样的问题，但通过用FormGroup包装我的TextField(在我的情况下(组件，消息就消失了。

<FormGroup>
<TextField
label="Add new node"
value={newNode}
onChange={this.onTextUpdate} />
</FormGroup>

Answer 3

原因如下：https://github.com/mui/material-ui/issues/16907#issuecomment-518990400

答案是用FormControl包装组件，或者用FromControl替换div。