使用ref手动改变antd的搜索框Input.Search的搜索内容

antd提供了Input.Search搜索框组件,它的其余属性和 Input 一致,通过value当然可以修改搜索内容,这里介绍另外一种方法来修改搜索的内容。
直接上代码:

import { useRef } from 'react';
import { Input } from 'antd';
...
const searchRef = useRef(null)
...
<Input.Search
  ref={searchRef}
  placeholder='请输入'
  onSearch={OnSearch}
  allowClear>
</Input.Search>
...
const changeVal = ()=>{
  searchRef.current.state.value = xxx
}
changeVal()
...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
v-model:value是Vue.js框架中用于双向绑定表单元素的属性。它可以用来将表单元素的value属性与Vue实例中的数据进行双向绑定。简写形式为v-model,可以直接绑定到Vue实例的数据上。 在Vue.js中,v-model:value实际上是v-bind:value和v-on:input的语法糖。v-bind:value用于绑定表单元素的value属性到Vue实例中的数据,而v-on:input则在input事件的回调函数中更新Vue实例中的数据。这样就实现了数据的双向绑定。 下面是一些示例代码,展示了如何使用v-model:value来绑定表单元素的值和Vue实例中的数据: 1. 在Vue.js 2.x版本中: ```html <div id="app"> <p>Message is: {{ msg }}</p> <input v-model="msg" type="text" /> </div> <script> let vm = new Vue({ el: '#app', data: { msg: 'superman' } }); </script> ``` 2. 在Vue.js 3.x版本中: ```html <template> <div> {{ textDemo }} <input v-model="textDemo" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const textDemo = ref('textDemo'); </script> ``` 这些示例代码演示了如何使用v-model:value来实现表单元素与Vue实例中数据的双向绑定。通过修改表单元素的值,可以相应地更新Vue实例中的数据,反之亦然。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【Vue】v-model 的使用](https://blog.csdn.net/Superman_H/article/details/128834328)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值