仅当复选框处于选中状态时复制表单输入- React Hook表单

import React, { useState, useEffect } from 'react';

function CopyInputOnCheckbox() {
  const [inputValue, setInputValue] = useState('');
  const [isChecked, setIsChecked] = useState(false);
  const [copiedValue, setCopiedValue] = useState('');

  // 当复选框状态改变时，根据其值来决定是否复制输入值
  useEffect(() => {
    if (isChecked) {
      setCopiedValue(inputValue);
    } else {
      setCopiedValue('');
    }
  }, [isChecked, inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={(e) => setIsChecked(e.target.checked)}
        />
        复制输入
      </label>
      {isChecked && <div>已复制的值: {copiedValue}</div>}
    </div>
  );
}

export default CopyInputOnCheckbox;

import React, { useState, useEffect, useRef } from 'react';

function CopyInputOnCheckbox() {
  const [inputValue, setInputValue] = useState('');
  const [isChecked, setIsChecked] = useState(false);
  const [copiedValue, setCopiedValue] = useState('');
  const prevIsCheckedRef = useRef();

  useEffect(() => {
    prevIsCheckedRef.current = isChecked;
  });

  useEffect(() => {
    if (prevIsCheckedRef.current !== true && isChecked) {
      setCopiedValue(inputValue);
    } else if (prevIsCheckedRef.current === true && !isChecked) {
      setCopiedValue('');
    }
  }, [isChecked, inputValue]);

  return (
    // ...同样的JSX代码
  );
}

export default CopyInputOnCheckbox;