In react.ts, the input input box bound to the ref object will be used to clear the content, and the corresponding ref assertion will be written to ensure that the value is obtained. Well, today I will
write a ts. The front end is really, I cry. , know everything!
Let me share an interesting way of writing ts. When writing projects, the built-in check of ts will ensure that our code will not have type errors, but this will indirectly increase the difficulty of our code. Although error prompts will be reported, the project The volume has indeed increased. No, when writing input today, I need to implement a business. The values entered from the input box are displayed and arranged on the page, so I use ref to bind to the input, and then set the button to complete the task. In order to improve the user experience, I still need to submit. After clicking the button, it is better to clear the input content. I encountered many strange errors, such as why assertions need to be used. Because when writing, the project did not enter input, causing ts to check that the value may be null, so it cannot be compiled. Just like the following will not work. :
myref=React.createRef<HTMLInputElement>() //与js不一样，ref在这里需要使用泛型指明将来绑定到input的元素上面，也就是提前声明
<input ref={
this.myref}></input>
<button onClick={
()=>{
this.setState({
list:[...this.state.list,this.myref.current.value]
})
}}>输出</button>
<ul>
{
this.state.list.map(item=><li key={
item}>{
item}</li>)
}
</ul>
Obviously the above is written in js, but in ts's view, this.myref.current may be null in the future (although we know it won't be, but ts needs to check to prevent it from actually going wrong), so at this time we need Tell ts that this ref will definitely be input in the future, and it cannot be empty, so I need to make a bold statement and define it! This is consistent with the assertion, so you need to write it like this to get the value:
console.log((this.myref.current as HTMLInputElement).value); //告诉ts将来这个值就是input元素
Then the final situation operation also needs to use assertions, but there is a pitfall! You need to add a semicolon after setState to disconnect the next assertion, otherwise an error that the expression is not available will be reported . The final code is like this:
myref=React.createRef<HTMLInputElement>()
<input ref={
this.myref}></input>
<button onClick={
()=>{
console.log((this.myref.current as HTMLInputElement).value);
this.setState({
list:[...this.state.list,(this.myref.current as HTMLInputElement).value] //使用断言假设
});
(this.myref.current as HTMLInputElement).value=''
}}>输出</button>
<ul>
{
this.state.list.map(item=><li key={
item}>{
item}</li>)
}
Okay, that’s it for today’s article, I hope it will be helpful to everyone!