实现点击复选框将输入框值复制到另一输入框的功能

核心思路 #

通过给复选框添加状态监听，在选中时将App Name的内容同步到Display Name输入框，还可优化为复选框选中时实时联动App Name的修改。

具体实现步骤及代码修改 #

1. 添加复选框状态
   新增useState跟踪复选框是否选中，同时修复原代码中formData的语法错误（多余的逗号）。

2. 绑定复选框点击事件
   给Checkbox组件添加onChange事件，选中时直接将App Name的值同步到Display Name；取消选中时保留当前Display Name内容，让用户自行编辑。

3. 可选优化：实时联动输入
   如果希望复选框选中时，修改App Name的同时自动更新Display Name，可在输入框的onChange函数中添加判断逻辑。

修改后的完整代码 #

import { Box, Checkbox, FormControl, FormLabel, Flex, Input } from "@chakra-ui/react"
import { useState } from "react"

export const CreateAnApp = (props) => {
 // 修复原代码语法错误，新增复选框状态
 const [formData, setFormData] = useState({
  name: "",
  displayName: "",
 });
 const [syncDisplayName, setSyncDisplayName] = useState(false);
 const { name, displayName } = formData;

 const onChange = (e) => {
  const { name: fieldName, value } = e.target;
  setFormData((prevState) => {
    // 复选框选中时，修改App Name同步更新Display Name
    if (syncDisplayName && fieldName === "name") {
      return {
        ...prevState,
        name: value,
        displayName: value,
      };
    }
    return {
      ...prevState,
      [fieldName]: value,
    };
  });
 };

 // 处理复选框点击事件
 const handleCheckboxChange = (e) => {
  const isChecked = e.target.checked;
  setSyncDisplayName(isChecked);
  // 选中时同步App Name到Display Name
  if (isChecked) {
    setFormData(prev => ({
      ...prev,
      displayName: prev.name
    }));
  }
 };

 return ( 
 <Flex mt = {6}>
  <Box>
   <FormControl>
    <FormLabel fontSize = "sm" fontWeight = "semibold">
     App Name 
    </FormLabel>
    <Input fontSize = "14" width = {{ sm: "165px", md: "225px"}} 
      name="name" 
      type = "text" 
      value = {name} 
      onChange = {onChange}
     />
   </FormControl>
    <Checkbox size='sm' onChange={handleCheckboxChange} isChecked={syncDisplayName}>
      Use as display name
    </Checkbox>
  </Box>
  
 <Box ml = {2}>
  <FormControl>
   <FormLabel fontSize = "sm" fontWeight = "semibold">
    Display Name
   </FormLabel>
   <Input fontSize = "14" width = {{sm: "165px", md: "225px"}} 
     name="displayName"
     type = "text"
     value = {displayName}
     onChange = {onChange}
   />
  </FormControl>
 </Box>
 </Flex>
 )
}

关键代码说明 #

• handleCheckboxChange：复选框点击时触发，选中状态下直接将formData.name赋值给formData.displayName，同时更新复选框状态。
• 输入框的onChange函数中增加判断：当复选框处于选中状态且修改的是App Name时，同步更新Display Name的值，实现实时联动。

内容的提问来源于stack exchange，提问作者user22125377