[解決済み] テスト
2022-01-27 17:17:11
質問
あるコンポーネントで、そのコンポーネントが他のコンポーネントの子である場合、そのコンポーネント内のプロップとして関数を使用しようとしています。しかし、この関数は動作しません。なぜでしょうか?これは、私がコンソールで受け取っている警告です。
警告: findDOMNode は StrictMode では非推奨です。findDOMNode は StrictMode 内にある Transition のインスタンスを渡されました。代わりに、参照したい要素に直接refを追加してください。
これは私のコードです
class Todo extends Component {
state = {
show: false,
editTodo: {
id: "",
title: "",
isCompleted: false
}
}
handleClose = () => {
this.setState({ show: false })
}
handleShow = () => {
this.setState({ show: true })
}
getStyle () {
return {
background: '#f4f4f4',
padding: '10px',
borderBottom: '1px #ccc dotted',
textDecoration: this.props.todo.isCompleted ? 'line-through'
: 'none'
}
}
//this method checks for changes in the edit field
handleChange = (event) => {
this.setState({ title: event.target.value })
console.log(this.state.editTodo.title);
}
render () {
//destructuring
const { id, title } = this.props.todo;
return (
<div style={this.getStyle()}>
<p>
<input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''}
{title}
<Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '}
<Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button>
</p>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit your Task!</Modal.Title>
</Modal.Header>
<Modal.Body >
<FormGroup >
<Form.Control
type="text"
value={this.state.editTodo.title}
onChange={this.handleChange}
/>
</FormGroup>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>
Close
</Button>
<Button variant="primary" onClick={this.handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
解決するには?
その
{コード
の呼び出しは、間違った場所に書き込まれているように見えます。その場合は
setState
オブジェクトを作成します。
editTodo
関連
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み] jQueryで、ユーザーがそのフィールドを編集している間、テキストフィールドの最初の文字を大文字にするにはどうすればよいですか?
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】XMLパースエラー:ルート要素が見つからない コンソールの場所 FF
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み】module.exports "モジュールが定義されていません"
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。