Блог

Главная - Вопросы по программированию - Внутри> FormControl есть несколько компонентов InputBase

Внутри> FormControl есть несколько компонентов InputBase

#reactjs #typescript #material-ui

#reactjs #машинописный текст #материал-пользовательский интерфейс

Вопрос:

У меня есть проблема :

Материал-пользовательский интерфейс: внутри 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>

Ответ №1:

Я знаю, что это может показаться не очень хорошим ответом. Однако документы и поднятая проблема на github не имеют четкого руководства!! Мой обходной путь состоял в том, чтобы просто обернуть входной элемент <FormControl /> компонентом. он остановил предупреждение без какого-либо побочного эффекта. Пожалуйста, имейте в виду, что все мои компоненты формы управляются через Reactjs состояние, и, следовательно, я не вижу проблем с этим решением.

Ответ №2:

У меня была такая же проблема, но, просто обернув мой компонент TextField (в моем случае) с помощью FormGroup, сообщение исчезло.

 <FormGroup>
        <TextField
        label="Add new node"
        value={newNode}
        onChange={this.onTextUpdate} />
</FormGroup>
Метки: