React JSで書かれたReact JSで書かれたオンラインで見つけた検索バーのCSSコントロールをReact TSに変換しようとしましたが、TSには新しいものであり、最後の問題の行で何を検索して何が間違っているのかを知るのに苦労しています。
エラーは
const { inputValue } = this.state;
にあります行とメッセージは
Type 'Readonly<{}>' has no property 'inputValue' and no string index signature.
私の制御コード
import * as React from 'react';
import './App.css';
class ControlBar extends React.Component {
constructor(props: any) {
super(props);
this.state = {
inputValue: ''
};
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(e: any) {
const { value } = e.target;
this.setState({
inputValue: value
});
}
public render() {
const { inputValue } = this.state;
return (<div className='input-wrapper'>
<input
placeholder='Search...'
value={inputValue}
spellCheck={false}
/>
<span className='input-highlight'>
{ inputValue.replace(/ /g, "\u00a0") }
</span>
</div>);
}
}
export default ControlBar;
回答 1 件
関連記事
- typecriptでコンポーネントの子エラーを反応させる
- React:JSXなしでコンポーネントを統合するとエラーが発生する
- ReactNativeでInputFieldコンポーネントを作成するときにエラーが発生する
- 制御されたフォームを子/親コンポーネントと反応させる
- 無関係なコンポーネントからデータを更新するReact
- React and Redux:401 Unauthorized Error POSTAPIリクエスト
- エラー404POSTフォームデータがreacttoexpressから
- 配列の残りの部分を削除せずに、React状態の配列からコンポーネントを削除するにはどうすればよいですか?
- ReactNativeアプリがコンポーネントをレンダリングしていません
- 現在のコンポーネントの下にあるコンポーネントの読み込みに反応する
関連した質問
- Typescript Reactコンポーネント:TS警告を停止するためにreduxpropタイプを実行する正しい方法
- TypeScriptの状態から値を分解するとエラーが発生する
- タイプ 'string'のパラメーターを持つインデックス署名がタイプDataTypeで見つかりませんでした
- Uberはスクロール矢印付きのタイプHorizontalScrollSpyを食べます
- Datepicker日付はイベントハンドラーで変更されません
- アイテムの削除時にコンポーネントを自動的に更新します
- Reactjs:他のコンポーネントアイテムからツールバーの状態にアクセスする
- React17をwebpack5およびbabel-plugin-react-css-modules(stylenameのcssモジュール)と統合します
- フック付きのReactアプリでデバウンス機能が機能しないのはなぜですか?
- Webpack DevServerが遅すぎますか、それとも何か問題がありますか?
S
で状態のタイプを定義できますReact.Component
の署名の一部 :インターフェースを定義します。
次に、クラスを次のように宣言します。