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