React+antd+UI框架获取当前选中的文本框数据,点击不同的行展示不同

目前我有一个table,table中暂时定义了有两行的数据,我想要实现点击不同的行展示的效果不一样
现在的功能是我点击编辑的时候弹出子组件的界面输入数据点击保存,再把数据传递到父组件中文本框中,但是我在点击
第二行的时候我那个数据会带过来。
希望达到的结果我不想继承第一行的数据。

当我table有两行数据单击当前行编辑按钮 就清空子组件中的数据不会把首次保存的数据继承过来

const columns = [
        
        {
          title: '启用条件',
          dataIndex: 'Enabling',
          key: 'Enabling',
          render: (_, record) => (
            <EnablingInput initialValue={enablingValues[record.key]} onChange={(value) => handleEnablingChange(record.key, value)} />
          ),  
        },
        {
          title: '编辑',
          key: 'edit',
          render: (text, record) => (
            <button onClick={() => handleEdit(record)}>编辑</button>
          ),
        },
        ] 

 function EnablingInput({ initialValue, onChange }) {
      debugger
      const [enablingValue, setEnablingValue] = useState(initialValue);
      const handleInputChange = (e) => {
        setEnablingValue(e.target.value);
        if (onChange) {
          onChange(e.target.value);
        }
      };
      return <Input value={enablingValue} onChange={handleInputChange} />;
    }

 const handleEnablingChange = (key, value) => {
      setEnablingValues((prevValues) => ({
        ...prevValues,
        [key]: value,
      }));
    };
        
        const handleEdit = (record) => {
        debugger
        // 处理编辑逻辑，例如根据 record 更新表格数据或其他操作
        setShowModal(true);
        setEditingKey(record.key);
        setenablingvalue(enablingValues[editingKey]);
        console.log("文本框的值:",setenablingvalue);
      };
      
      const onSave = (values) => {
        debugger
        const { Enabling } = values;
        enablingValues[editingKey] = Enabling;
        // 使用 editingKey 进行更新相应的行
        // 更新完毕后清空 editingKey
        setEditingKey(null);
        setShowModal(false);
      };
      
      
      
      <EnablingeditComponets
visible={showModal}
handclose={handleClose}
onSave={onSave}
enablingValue={enablingvalue} // 将当前编辑行的值传递给子组件
/>

  <Table
                dataSource={columntwoData}
                columns={columntwo}
                />
                
子组件
function EnablingeditComponets(props){


    const{

        visible,
        handclose,

    }=props;

    const[isopenBnnagling,setisopenBnnagling]=useState(false);
    const [form] = Form.useForm();//Form.useForm()生成了一个form实例，并将其绑定到了Form组件上
const [currentEnablingValue, setCurrentEnablingValue] = useState(enablingvalue);

 useEffect(() => {
      setisopenBnnagling(visible);
      form.setFieldsValue({ 
        Enabling: currentEnablingValue,
    }); // 设置初始值为 enablingValue
    }, [visible, currentEnablingValue, form]);
   
    const handleSave=(values)=>{
        console.log("条件值:",values);
        onSave(values);
        form.setFieldsValue(values);
        form.resetFields(); //清空表单数据
      
    }

    return(

        <>
        
       <Modal visible={visible} onCancel={handclose} footer={null}>
        <Form
        form={form}
        onFinish={handleSave} layout="vertical">
            <Form.Item name="Enabling" label="启用条件"
            value={currentEnablingValue} onChange={(e) => setCurrentEnablingValue(e.target.value)}
            >
            <Input />
            </Form.Item>

            <Form.Item wrapperCol={{ span: 24, style: { textAlign: 'center' } }}>
            <Button type="primary" htmlType="submit">
                保存
            </Button>
            </Form.Item>
        </Form>
    </Modal>
        </>

    )


}export default EnablingeditComponets

点击按钮


{showModal && (
 <EnablingeditComponets
  visible={showModal}
  handclose={handleClose}
  onSave={onSave}
  enablingValue={enablingvalue} // 将当前编辑行的值传递给子组件
/>
)}
就这样完事

根据你的描述，你想要实现在点击不同行时展示不同数据的效果。目前的问题是第二行点击编辑时会继承第一行的数据。

要实现点击不同行展示不同效果的功能，需要对每一行的编辑按钮进行单独处理。你可以通过记录当前编辑的行的key值，在点击编辑按钮时将该值传递给子组件，然后根据这个key值获取相应行的数据。这样就能保证不同行之间的数据不会互相影响。

下面是一种可能的实现方式：

在父组件中定义一个状态editingKey来记录当前编辑的行的key值。
在handleEdit函数中，设置editingKey为当前编辑的行的key值，并将对应的数据传递给子组件。
在子组件中，通过接收到的enablingValue来初始化表单的初始值，并在修改表单项时更新currentEnablingValue的值。
在保存表单数据时，将最新的值传递给父组件，并进行相关操作。

以下是修改后的代码示例：

// 父组件
const [editingKey, setEditingKey] = useState(null);

const handleEdit = (record) => {
  setEditingKey(record.key);
  setShowModal(true);
};

const onSave = (values) => {
  const { Enabling } = values;
  enablingValues[editingKey] = Enabling;
  setEditingKey(null);
  setShowModal(false);
};

<EnablingeditComponets
  visible={showModal}
  handclose={handleClose}
  onSave={onSave}
  enablingValue={enablingValues[editingKey]} // 根据当前编辑行的key值获取对应的数据
/>

// 子组件
const [currentEnablingValue, setCurrentEnablingValue] = useState(enablingValue);

useEffect(() => {
  form.setFieldsValue({ 
    Enabling: currentEnablingValue,
  });
}, [visible, currentEnablingValue, form]);

const handleSave = (values) => {
  onSave(values);
  form.resetFields();
};

<Form.Item name="Enabling" label="启用条件" initialValue={currentEnablingValue}>
  <Input onChange={(e) => setCurrentEnablingValue(e.target.value)} />
</Form.Item>

通过以上修改，现在点击不同行的编辑按钮时，子组件中的表单数据将根据对应行的数据进行初始化，并且保存后的数据也会正确地更新到相应行中。这样就实现了点击不同行展示不同效果且数据不互相影响的功能。

你可以看下这个问题的回答https://ask.csdn.net/questions/7675183
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：react 使用antd 的table组件，批量操作后还存留之前的打钩项

通过两位大佬的分享我对代码进行了结合
已经实现了该功能

父组件中

<EnablingeditComponets
visible={showModal}
handclose={handleClose}
onSave={onSave}
// enablingValue={enablingvalue} // 将当前编辑行的值传递给子组件据
enablingvalue={enablingValues[editingKey]} // 根据当前编辑行的key值获取对应的数据
/>

子组件
function EnablingeditComponets(props){
 
debugger
    const{
 
        visible,
        handclose,
        onSave,
        enablingvalue,//接收父组件的数据
        Availablevalue,
        editcodingvalue,
        updateventvalue,
        filedencodingvalue,
    }=props;
 
    const [form] = Form.useForm();//Form.useForm()生成了一个form实例，并将其绑定到了Form组件上
    const [isopenBnnagling, setisopenBnnagling] = useState(false);
 
        useEffect(() => {
        setCurrentEnablingValue(enablingvalue);
        }, [enablingvalue]);
 
    
    const [currentEnablingValue, setCurrentEnablingValue] = useState(enablingvalue);
  
    useEffect(() => {
      setisopenBnnagling(visible);
      form.setFieldsValue({ 
        Enabling: currentEnablingValue,
    }); // 设置初始值为 enablingValue位
    }, [visible, currentEnablingValue, form]);
 
    const handleSave=(values)=>{
        console.log("条件值:",values);
        onSave(values);
        form.setFieldsValue(values);
        form.resetFields(); //清空表单数据
       
    }
      
 
    return(
 
        <>
        
        <Modal visible={visible} onCancel={handclose} footer={null}>
        
        <Form
        form={form}
        onFinish={handleSave} layout="vertical">
        <Form.Item name="Enabling" label="启用条件" initialValue={currentEnablingValue}
        value={currentEnablingValue} onChange={(e) => setCurrentEnablingValue(e.target.value)}
        >
           
            <Input />
            </Form.Item>
 
            <Form.Item wrapperCol={{ span: 24, style: { textAlign: 'center' } }}>
            <Button type="primary" htmlType="submit">
                保存
            </Button>
            </Form.Item>
        </Form>
        <IssuesCloseOutlined
        style={{ position: 'absolute', top: '16px', right: '246px', fontSize: '15px' }}
        onClick={handleRefresh}
          />
    </Modal>
        </>
 
    )
 
 
}export default EnablingeditComponets