teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

動かない方を手直し

2020/01/10 10:24

投稿

FKM
FKM

スコア3662

title CHANGED
File without changes
body CHANGED
@@ -63,26 +63,26 @@
63
63
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
64
64
  <script type="text/babel">
65
65
  //定義部分
66
+ function App(props){
66
- const mes = ''
67
+ const mes = ''
67
- //処理部分
68
+ //処理部分
68
- let changeText = (e)=>{
69
+ let changeText = (e)=>{
69
- let mes = {mes:e.target.value};
70
+ setState({mes: target.value});
71
+ }
70
- console.log(mes); //次行をコメントアウトした場合、反映結果は表示される
72
+ console.log(changeText);
73
+ return <div>
74
+ <input onChange={changeText} />
71
- setState({mes}); //setState is undefinedと出る
75
+ <p>入力された文字<span>{ changeText.mes }</span></p>
76
+ </div>;
72
77
  }
73
- const elem = (
78
+
74
- <div>
75
- <input onChange={changeText} />
79
+ const elem = <App />;
76
- <p>入力された文字<span>{ changeText.mes }</span></p>
77
- </div>
78
- );
79
80
  //レンダリング処理
80
81
  ReactDOM.render(
81
82
  elem,
82
83
  document.getElementById("root")
83
84
  );
84
85
  </script>
85
-
86
86
  </head>
87
87
  <body>
88
88
  <div id="root"></div>