关于react.js:react函数组件使用antd-ui框架-点击按钮清空输入框的值

32次阅读

共计 746 个字符,预计需要花费 2 分钟才能阅读完成。

明天突发奇想,想要用 react 做一个 todolist,性能很简略,即:
一个输入框,一个按钮,一个列表
输入框中输出内容,点击按钮,列表新增一列,而后清空输入框

其余倒没什么好说的,次要的问题就在于最初一步,即点击按钮当前,清空输入框。

作为一个初学者,查阅文档当前,决定采纳 ref 获取 dom 的办法批改输入框的值。

能够看到,通过 ref,间接拿到了输入框的 dom 对象,和以后的 value 值,由此理所应当,间接
inputRef.current.input.value=0 就能够批改以后输入框的值了

然而,后果是否定的,这样无奈批改输入框的值,查了很多材料,有的说什么通过inputRef.current.state.value=0 能够改,都是骗人的。

最终还是要通过间接对组件的 value 属性进行操作,才可能扭转输入框的值


首先第一步,绑定 value 对象

const [value,setValue] = useState('')

<Search  value={value}  />

第二步,绑定 change 事件,不然输入框的值始终都会是默认值

const changeValue = (e:any) =>{setValue(e.target.value)
}

<Search value={value} onChange={changeValue}/>

第三步,绑定按钮的点击事件,在点击的时候,清空 value 的值

const onSearch=(e:any)=>{setValue('')
}

<Search ... onSearch={onSearch}/>

自此,点击清空输入框就实现了。

react在我看来还是十分的不不便的,如果是用 anglar 来做的话,间接在输入框的 value 绑定一个值,后续间接改这个值就行了。react并不是双向绑定的,所以不不便

正文完
 0