web-dev-qa-db-ja.com

タイプ 'null'はタイプ 'HTMLInputElement' ReactJsに割り当てられません

TypeScriptと共にreactJSにデータを参照しようとしています。これをしている間、私は以下のエラーになっています

Type 'null' is not assignable to type 'HTMLInputElement'

ここで正確に間違っていることを教えてください、React https://reactjs.org/docs/refs-and-the-dom.html 私はここで何か間違ったことをしていると思います。以下はスコープスニペットです

  class Results extends React.Component<{}, any> {
  private textInput: HTMLInputElement;
  .......
  constructor(props: any) {
    super(props);

    this.state = { topics: [], isLoading: false };

    this.handleLogin = this.handleLogin.bind(this);
    }

     componentDidMount() {.....}

    handleLogin() {
    this.textInput.focus();
    var encodedValue = encodeURIComponent(this.textInput.value);
   .......
}

  render() {
    const {topics, isLoading} = this.state;

    if (isLoading) {
        return <p>Loading...</p>;
    }

    return (
        <div>
              <input ref={(thisInput) => {this.textInput = thisInput}} type="text" className="form-control" placeholder="Search"/>
              <div className="input-group-btn">     
                           <button className="btn btn-primary" type="button" onClick={this.handleLogin}>

   ...............

ここで何が欠けているのでしょうか？

reactjstypescriptreference
9
Abhinav1singhal

入力はnullまたはHTMLInputElementである可能性があると型定義で示されているため、エラーが生成されます

"strict": falseにtsconfig.jsonを設定できます

または、入力をHTMLInputElementタイプに強制することができます

<input ref={thisInput => (this.textInput = thisInput as HTMLInputElement)} type="text" className="form-control" placeholder="Search" />

この方法も有効です（ 確定割り当てアサーション（TypeScript> = 2.7）を使用 ）

<input ref={thisInput => (this.textInput = thisInput!)} type="text" className="form-control" placeholder="Search" />
12
lleon

これは、実際、次の正しい使用と称賛に値する使用が原因です。

"strict": "true"

すべて重要なものを含むいくつかのルールを設定します：

「strictNullChecks」：「true」

潜在的なヌルの処理

これを処理する正しい方法は、要素が実際にnullでないことを確認することです。これは、要素を照会するために使用するほとんどすべてのメソッドが1つの検索に失敗する可能性があるためです。

次の例では、ifステートメントはタイプガードとして機能するため、HTMLElement | nullはHTMLElementに絞り込まれます。

const elem = document.getElementById('test');

if (elem) {
  elem.innerHTML = 'Type here is HTMLElement, not null';
}

HTML要素タイプの処理

タイプをHTMLElementからHTMLInputElementに絞り込むには、「I know better」アプローチを使用し、タイプアサーションを使用します（微妙なエラーのクラスを可能にします）。

const example = <HTMLInputElement> elem;

または、カスタムタイプガードを使用して適切に行うことができます。以下の例ではHTMLElement | nullそして、それがnullでなく、正しいタグ名を持つ場合、HTMLInputElementに絞り込みます。

function isInputElement(elem: HTMLElement | null): elem is HTMLInputElement {
  if (!elem) {
    // null
    return false;
  }

  return (elem.tagName === 'INPUT')
}

更新されたタイプガードコールは次のようになります。

const elem = document.getElementById('test');

if (isInputElement(elem)) {
  console.log(elem.value);
}
2
Fenton

私はrefを使用する前にif条件を使用して反応することで解決しました

  if (this.ref.current) {

      this.editor = monaco.editor.create(
          this.ref.current,
          { automaticLayout: true }
      );

      monaco.editor.setTheme('vs-dark');
      this.editor.setModel(this.model);
  }
1
Lakkanna walikar