RustのTauriアプリケーションでinputタグ使用時にエラー

RustのTauriアプリケーションを作成しています。

プロジェクト新規作成時のtsxファイルに<input>タグを挿入しました。
しかし、以下のエラーが出現しました。

'this' は型として注釈を持たないため、暗黙的に型 'any' になります。ts(2683)
App.tsx(5, 10): 'this' の外部値がこのコンテナーによってシャドウされています。

tsxファイルの中身は以下の通りです。どのようにすれば、入力が可能になるのでしょうか。

typescript
1import React, { Component } from 'react';
2import logo from './logo.svg';
3import './App.css';
4
5function App() {
6
7  return (
8    <div className="App">
9      <header className="App-header">
10        <img src={logo} className="App-logo" alt="logo" />
11        <p>
12          Edit <code>src/App.tsx</code> and save to reload.
13        </p>
14        <a
15          className="App-link"
16          href="https://reactjs.org"
17          target="_blank"
18          rel="noopener noreferrer"
19        >
20          Learn React
21        </a>
22      </header>
23      <body>
24        <form name="timer">
25
26// ここでエラー
27          <input type="text" name="moji" value={this.state.text}>
28          </input>
29
30        </form>
31      </body>
32      <script src="code.js"></script>
33    </div>
34  );
35}
36
37export default App;
38

hoshi-takanori

2022/05/22 21:13

Rust というより React の質問では…。で、this.state というのはクラスコンポーネントの書き方ですね。関数コンポーネントでは useState を使うと良いでしょう。 https://qiita.com/seira/items/f063e262b1d57d7e78b4

Sheep_fluffy

2022/05/22 21:38

情報ありがとうございます！

行動規範の内容に同意します

回答1件

自己解決

解決しました。useStateを使用しました。

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

const Child: React.FC = () => {
  return (
    <p>子コンポーネント</p>
  )
}

function App() {
  const [count, setCount] = useState<string>("");
  function testWrite(event: { target: { value: React.SetStateAction<string>; }; }) {
    setCount(event.target.value);
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <body>
        <Child />
        <form name="timer">
          <input type="text" name="moji" value={count} onChange={testWrite}>
          </input>
        </form>
      </body>
      <script src="code.js"></script>
    </div>
  );
}

export default App;

投稿2022/05/22 21:38

Sheep_fluffy

総合スコア35