获取屏幕上显示的所有字段值 ReactJs

Question

在我的 ReactJs 应用程序中，我只想获取显示在屏幕上的字段的值，例如，我有一些无线电组，当我选择特定值时，一组将被隐藏，如下面的代码：

const App = () => {
  const [value, setValue] = useState();
  const [value2, setValue2] = useState();

  const onChange = (e) => {
    setValue(e.target.value);
  };

  const onChange2 = (e) => {
    setValue2(e.target.value);
  };

  return (
    <div className='container'>
      <div>
        <Radio.Group value={value} onChange={onChange}>
          <Radio value={1}>yes</Radio>
          <Radio value={2}>no</Radio>
        </Radio.Group>
      </div>

      {value === 1 ? null : (
        <div>
          <Radio.Group value={value2} onChange={onChange2}>
            <Radio value={3}>yes</Radio>
            <Radio value={4}>no</Radio>
          </Radio.Group>
        </div>
      )}
    </div>
  );
};

正如您在我的简单代码中看到的那样，当第一个无线电组的值为“1”时，第二个无线电组将被隐藏。 但是，如果我在第二个无线电组中选择一些值（3 或 4），然后在第一个无线电组中选择 select 值“1”，则第二个无线电组中的值仍然是我之前选择的值。

这种情况很容易重置一个字段或忽略它，但如果我有一个包含 20 个字段的表单，我只想获取屏幕上显示的字段，即使我没有重置隐藏字段。

有没有一种方法可以获取在“容器”div 中呈现的所有值或更好的方法？

Answer 1

尝试这个

// This means "whenever the second group becomes hidden, reset its state to default"
useEffect(() => {
  const secondIsHidden = value === 1;
  if (secondIsHidden) setValue2(undefined); // Or whatever
}, [value]);

Answer 2

我创建了一个 state 并为每个键设置了 boolean 值。 如果它not-hidden ，我设置 false 否则为 true。

const App = () => {
    const [value, setValue] = useState();
    const [value2, setValue2] = useState();

    const [radioValues, setRadioValues] = useState({ 1: false, 2: false, 3: false, 4: false });

    const onChange = (e: any) => {
        setRadioValues((prev) => {
            let newValues: any = {};
            Object.entries(prev).forEach((item: any) => {
                newValues[parseInt(item[0])] = e.target.value === 1 ? [3, 4].includes(parseInt(item[0])) : false;
            });
            return newValues;
        });
        setValue(e.target.value);
    };

    const onChange2 = (e: any) => {
        setValue2(e.target.value);
    };

    console.log(Object.keys(radioValues).filter((key) => !radioValues[key]));

    return (
        <div className='container'>
            <div>
                <Radio.Group value={value} onChange={onChange}>
                    <Radio value={1}>yes</Radio>
                    <Radio value={2}>no</Radio>
                </Radio.Group>
            </div>

            {value === 1 ? null : (
                <div>
                    <Radio.Group value={value2} onChange={onChange2}>
                        <Radio value={3}>yes</Radio>
                        <Radio value={4}>no</Radio>
                    </Radio.Group>
                </div>
            )}
        </div>
    );
};

export default App;