Modal.confirm中的content作为jsx时，表单元素Input的双向绑定无效

[lovelyJason]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

windows10, chrome 123.0.6312.122（正式版本） （64 位）, Vue: 3.3.4， ant-design-vue: 4.0.2

Reproduction link

https://stackblitz.com/~/github.com/vbenjs/vue-vben-admin

Steps to reproduce

1. 打开我提供的最小仓库，运行项目
2. 点击表格中【跳转】，弹出窗口，输入框输入内容， 如下图

What is expected?

Modal.confirm中的content要求具有响应式

What is actually happening?

表单元素输入的时候，值不被更新；实际上就是手动实现受控组件的时候，Input输不进去值

[lovelyJason]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

windows10, chrome 123.0.6312.122（正式版本） （64 位）, Vue: 3.3.4， ant-design-vue: 4.0.2

Reproduction link

https://stackblitz.com/~/github.com/vbenjs/vue-vben-admin

Steps to reproduce

1. 打开我提供的最小仓库，运行项目
2. 点击表格中【跳转】，弹出窗口，输入框输入内容， 如下图

What is expected?

Modal.confirm中的content要求具有响应式

What is actually happening?

表单元素输入的时候，值不被更新；实际上就是手动实现受控组件的时候，Input输不进去值

这种做法无效：

<script setup>
    const userToken = ref('');
    const emit = defineEmits();

    const onJumpClick = (record) => {
      console.log(emit);
  
      const handleInput = (event) => {
        console.log(event.target.value);
        userToken.value = event.target.value;
        emit('update:modelValue', userToken.value);
      };
  
      modal.confirm({
        title: '请填写一个用户token',
        icon: h(ExclamationCircleOutlined),
        content: (
          <div>
            <Input
              value={userToken.value}
              onChange={handleInput} // 使用 handleInput 处理输入事件
            />
          </div>
        ),
        onOk() {
          console.log('OK');
        },
      });
    };
</script>

然而下面这个做法,表单能输入，但是userToken不更新

  const emit = defineEmits();
  const userToken = ref('');

  const onJumpClick = (record) => {
    console.log(emit);

    const handleInput = (event) => {
      console.log(event.target.value);
      userToken.value = event.target.value;
      // emit('update:modelValue', userToken.value);
    };

    modal.confirm({
      title: '请填写一个用户token',
      icon: h(ExclamationCircleOutlined),
      content: () => (
        <div>
          <Input v-model={userToken.value} />
        </div>
      ),
      onOk() {
        console.log('OK');
      },
    });
  };

[fanxiaodan-ra]

<Input v-model={[userToken, 'value']} /> 你要不要试试这样

[lllianreg]

比较麻烦 需要update 因为不能响应式更新

const modalUpdate = (modal, e) => {
  userToken.value = e?.target?.value || ''
  modal.update({
    title: '请填写一个用户token',
    content: (
      <div>
        <Input
          value={ userToken.value }
          onChange={ e=> modalUpdate(modal, e) }
        />
      </div>
    )
  })
}
const modal = Modal.confirm({})
modalUpdate(modal)

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days