在复选框 onchange 上显示/隐藏输入字段

Question

我有一个问题，我需要根据复选框的状态显示和隐藏输入/文本字段。意味着当复选框状态被选中时，我需要显示 TextField，而当我取消选中时，它应该隐藏。 我在下面附上了这个组件的代码。如您所见，我已经创建了 TextField，但我需要隐藏/显示它们。当我选中/取消选中 checkbox2 时显示/隐藏 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 wolrd有2个输入，第一个是受控，另一个是不受控。

如果您选择使用受控方式，您可能会将值保存在自己的表单状态中，并且可以使用该值来显示文本字段。在不受控制的情况下，您要先选择 DOM 元素，然后再对其进行操作。

根据您的代码判断，您似乎想以不受控制的方式来做这件事。

---

选项

1. 用 css 隐藏 DOM 元素
2. 使用条件渲染卸载 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 将您的 ref 转发到输入元素。 （例如 > 在材质 UI 中，inputRef={YOUR_REF}）。