У меня проблема, мне нужно показать и скрыть поле ввода/текста в зависимости от состояния флажка. Означает, что когда состояние флажка отмечено, мне нужно показать TextField, а когда я снимаю флажок, оно должно скрываться. Я прикрепил код этого компонента ниже. Как видите, у меня уже созданы TextFields, но мне нужно их скрыть/показать. Когда я устанавливаю/снимаю флажок2, показываю/скрываю TextField2. Спасибо за любую подсказку или совет!
import React, { useState } from "react";
import { Button } from "../../components/Button";
import { Checkbox } from "../../components/Checkbox";
import { FormBuilder } from "../../components/FormBuilder";
import { Grid, GridCell, GridRow } from "../../components/Grid";
import { LinearProgress } from "../../components/LinearProgress";
import { Select } from "../../components/Select";
import { TextField } from "../../components/TextField";
import { Name } from "../../models/Name";
import { Option } from "../../models/Option";
import { DynamicForm } from "../../models/DynamicForm";
import "./index.css";
import { Organization } from "../../models/Organization";
//let checkboxChecked = showDropDown;
const FormDetails = ({ dynamicForm }: { dynamicForm: DynamicForm }) => {
return (
<div>
<h4 style = {{ margin: 16 }}>asd</h4>
<Grid>
<GridRow>
<GridCell span = {4}>
<TextField
maxLength = {512}
textarea
label = "TextField1"
onChange = {(value) => (dynamicForm.description.kk = value)}
defaultValue = {dynamicForm.description?.ru}
/>
</GridCell>
<GridCell span = {4}>
<TextField
maxLength = {512}
textarea
label = "TextField2"
onChange = {(value) => (dynamicForm.description.en = value)}
defaultValue = {dynamicForm.description?.en}
/>
</GridCell>
</GridRow>
<GridCell span = {4}>
<Checkbox
label = "Checkbox1"
onChange = {(value) => (dynamicForm.needApprove = value)}
defaultChecked = {dynamicForm.needApprove}
/>
</GridCell>
<GridCell span = {5}>
<Checkbox
label = "Checkbox2" //
onChange = {(value) => (dynamicForm.needExtraApprove = value)}
defaultChecked = {dynamicForm.needExtraApprove}
/>
</GridCell>
</GridRow>
</Grid>
</div>
);
};
export default () => {
const [step, setStep] = useState(1);
const [dynamicForm, setDynamicForm] = useState<DynamicForm>(
new DynamicForm()
);
let progress = parseFloat(((step - 1) * (1 / NUMBER_OF_STEPS)).toFixed(2));
const onBackButtonPress = () => {
if (step > 0) {
setStep((prev) => prev - 1);
}
};
const onNextButtonPress = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (step < screen.third) {
setStep((prev) => prev + 1);
} else {
console.info("submit!");
//submit
}
};
let content = <SubDivision dynamicForm = {dynamicForm} />;
if (step === screen.second) {
content = <FormDetails dynamicForm = {dynamicForm} />;
} else if (step === screen.third) {
content = <FormFields dynamicForm = {dynamicForm} />;
}
return (
<form onSubmit = {onNextButtonPress} noValidate = {step === screen.third}>
<LinearProgress progress = {progress} determinate />
{content}
<div className = "request-btn-container">
<Button label = "Previous step" onClick = {onBackButtonPress} />
<Button label = "Next step" type = "submit" />
</div>
</form>
);
};
Буду признателен за любую подсказку или совет.
В мире React есть 2 входа, первый контролируемый, а другой неконтролируемый.
Если вы решите использовать контролируемый способ, вы, вероятно, держите значение в своем собственном состоянии формы, и вы можете использовать это значение для отображения текстового поля. Неконтролируемым образом вы должны сначала выбрать элемент DOM, прежде чем манипулировать им.
Похоже, что вы хотите сделать это неконтролируемым образом, судя по вашему коду.
import { useRef } from 'react'
.
.
.
const FormDetails = ({ dynamicForm }: { dynamicForm: DynamicForm }) => {
const text1 = useRef()
const check1 = useRef()
const text2 = useRef()
const check2 = useRef()
useEffect(() =>{
text1.current.style.display = check1.current.checked ? 'none' : 'block'
}, [ check1.current.checked ])
useEffect(() =>{
text2.current.style.display = check2.current.checked ? 'none' : 'block'
}, [ check2.current.checked ])
return (
<div>
<h4 style = {{ margin: 16 }}>asd</h4>
<Grid>
<GridRow>
<GridCell span = {4}>
<TextField
maxLength = {512}
textarea
label = "TextField1"
onChange = {(value) => (dynamicForm.description.kk = value)}
defaultValue = {dynamicForm.description?.ru}
ref = {text1}
/>
</GridCell>
<GridCell span = {4}>
<TextField
maxLength = {512}
textarea
label = "TextField2"
onChange = {(value) => (dynamicForm.description.en = value)}
defaultValue = {dynamicForm.description?.en}
ref = {text2}
/>
</GridCell>
</GridRow>
<GridCell span = {4}>
<Checkbox
label = "Checkbox1"
onChange = {(value) => (dynamicForm.needApprove = value)}
defaultChecked = {dynamicForm.needApprove}
ref = {check1}
/>
</GridCell>
<GridCell span = {5}>
<Checkbox
label = "Checkbox2" //
onChange = {(value) => (dynamicForm.needExtraApprove = value)}
defaultChecked = {dynamicForm.needExtraApprove}
ref = {check2}
/>
</GridCell>
</GridRow>
</Grid>
</div>
);
};
import { useRef } from 'react'
.
.
.
const FormDetails = ({ dynamicForm }: { dynamicForm: DynamicForm }) => {
const check1 = useRef()
const check2 = useRef()
return (
<div>
<h4 style = {{ margin: 16 }}>asd</h4>
<Grid>
<GridRow>
<GridCell span = {4}>
{
!check1.current.checked &&
<TextField
maxLength = {512}
textarea
label = "TextField1"
onChange = {(value) => (dynamicForm.description.kk = value)}
defaultValue = {dynamicForm.description?.ru}
/>
}
</GridCell>
<GridCell span = {4}>
{
!check2.current.checked &&
<TextField
maxLength = {512}
textarea
label = "TextField2"
onChange = {(value) => (dynamicForm.description.kk = value)}
defaultValue = {dynamicForm.description?.ru}
/>
}
</GridCell>
</GridRow>
<GridCell span = {4}>
<Checkbox
label = "Checkbox1"
onChange = {(value) => (dynamicForm.needApprove = value)}
defaultChecked = {dynamicForm.needApprove}
ref = {check1}
/>
</GridCell>
<GridCell span = {5}>
<Checkbox
label = "Checkbox2" //
onChange = {(value) => (dynamicForm.needExtraApprove = value)}
defaultChecked = {dynamicForm.needExtraApprove}
ref = {check2}
/>
</GridCell>
</GridRow>
</Grid>
</div>
);
};
Если вы сохраняете значение form как состояние, вы можете заменить ref.current.checked своим собственным логическим состоянием.
Если вы используете фреймворк со своими компонентами, должен быть API для перенаправления вашей ссылки на элемент ввода. (например, > в пользовательском интерфейсе материала inputRef = {YOUR_REF}).
Вы не должны использовать
defaultValue
,defaultChecked
, если хотите использовать обновленные значения состояния в поле. Вместо этого вы должны использоватьvalue
иchecked
.