Show/Hide 复选框 onchange 上的输入字段

Question

我有一个问题，我需要根据复选框的状态显示和隐藏 Input/Text 字段。意味着当检查复选框状态时，我需要显示Textfield，当我取消选中时，它应该隐藏。我在下面附上了这个组件的代码。如您所见，我已经创建了 TextFields，但我需要 hide/show 它们。当我 check/uncheck checkbox2 show/hide 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.log("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>
  );
};

将不胜感激任何提示或建议。

Answer 1

React worrd 中有 2 个输入，第一个是 controlled，另一个是 uncontrolled.

如果您选择使用受控方式，您可能将值保存在您自己的表单状态中，您可以使用该值来显示文本字段。以不受控制的方式，你要先 select DOM 元素，然后再操作它。

从你的代码来看，你似乎想以不受控制的方式来做这件事。

选项

用 css
使用条件渲染卸载 DOM

用 css 隐藏 DOM 元素 - 使用 ref

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>
  );
};

使用条件渲染卸载 DOM - 使用 ref

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>
  );
};

如果您将表单的值保留为状态，则可以将 ref.current.checked 替换为您自己的布尔状态。

如果您在组件中使用框架，则必须有 API 将您的引用转发给输入元素。（例如 > 在 material UI 中，inputRef={YOUR_REF}）。

Show/Hide 复选框 onchange 上的输入字段

Show/Hide Input field on checkbox onchange

checkbox

show-hide

typescript

reactjs

选项

用 css 隐藏 DOM 元素 - 使用 ref

使用条件渲染卸载 DOM - 使用 ref