react函数组件使用antd ui框架 点击按钮清空输入框的值

今天突发奇想，想要用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并不是双向绑定的，所以不方便