React.ts では、ref オブジェクトにバインドされた input 入力ボックスがコンテンツをクリアするために使用され、対応する ref アサーションが書き込まれて値が確実に取得されるようになります
。本当に、泣けます、全部知ってます！
ts を記述する興味深い方法を共有しましょう。プロジェクトを作成するとき、ts の組み込みチェックによりコードに型エラーがないことが保証されますが、これにより間接的にコードの難易度が上がります。エラー プロンプトは報告されますが、プロジェクト 確かに量が増えました。いえ、今日入力を書いていたときに、入力ボックスから入力した値をページ上に表示・配置する業務を実装する必要があったので、refを使って入力にバインドして、完了するボタンを設定しましたユーザーエクスペリエンスを向上させるために、タスクを送信する必要がありますが、ボタンをクリックした後は、入力内容をクリアすることをお勧めします。なぜアサーションを使用する必要があるのかなど、多くの奇妙なエラーに遭遇しました。書き込み時にプロジェクトが入力を入力しなかったため、ts が値が null である可能性があることを確認するため、コンパイルできませんでした。次のようには機能しません。 . :
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>
明らかに上記は js で書かれていますが、ts の観点から見ると、this.myref.current は将来 null になる可能性があります (そうならないことはわかっていますが、ts は実際に問題が発生しないようにチェックする必要があります)。したがって、現時点では、この ref が将来必ず入力されることを ts に伝える必要があり、空にすることはできないため、大胆なステートメントを作成して定義する必要があります。これはアサーションと一致しているため、値を取得するには次のように記述する必要があります。
console.log((this.myref.current as HTMLInputElement).value); //告诉ts将来这个值就是input元素
最後の状況の操作でもアサーションを使用する必要がありますが、落とし穴があります。次のアサーションを切断するには、setState の後にセミコロンを追加する必要があります。そうしないと、式が使用できないというエラーが報告されます。最終的なコードは次のようになります。
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>)
}
さて、今日の記事はここまでです。皆さんのお役に立てれば幸いです。