ReactでのonSubmit,onChangeが効きません。

Question

Tsuyano Syodaさんの書籍「React.js&Next.js超入門」を勉強しています。

169ページのフォームの利用で書籍の内容の通りに書いたつもりなのですが、onChangeにてイベントがうまく反映されていないように感じます。

理想的には、
①フォーム内のinputに入力した値が変更され、onChangeによりdoChangeが実行されthis.inputが変化
②フォーム内のsubmitを押すことでonSubmitによりdoSubmitが実行されthis.state.messageが変化
③変化されたstateの内容が反映

と想定しているのですが、①の段階でうまく行っていなく感じました。どこが間違っているのか教えていただきたいです。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Rect from "./Rect"

class App extends React.Component {
  input = "";

  msgStyle={
    fontSize:"20pt",
    color:"#900",
    margin:"20px 0px",
    padding:"5px",
  };

  inputStyle={
    fontSize:"12pt",
    padding:"5px"
  }

  constructor(props) {
    super(props);
    this.state={
      message:"type your name:"
    };
    this.doChange=this.doChange.bind(this);
    this.doSubmit=this.doSubmit.bind(this);
  }

  doChange(event){
    this.input=event.target.value;
  }

  doSubmit(event){
    this.setState=({
      message:"Hello, "+this.input+"!!"
    });
    event.preventDefault();
  }
  render() {
    return <div>
      <h1>React</h1>
      <h2>{this.state.message}</h2>
      <form onSubmit={this.doSubmit} >
        <span style={this.inputStyle}></span>Message:
        <input type="text" style={this.inputStyle} onChange={this.doChange} />
        <input type="submit" style={this.inputStyle} value="Click"/>
      </form>
    </div>;
  }
}


export default App;

Answer 1

inputの値をstateで管理してください。
this.inputではrenderには反映されません。

  constructor(props) {
    super(props);
    this.state={
      message:"type your name:",
      text:""
    };
    this.doChange=this.doChange.bind(this);
    this.doSubmit=this.doSubmit.bind(this);
  }

  doChange(event){
    this.setState({text:event.target.value}); //set
  }

  doSubmit(event){
    this.setState=({
      message:"Hello, "+this.state.text+"!!" //stateからの参照
    });
    event.preventDefault();
  }
  render() {
    return <div>
      <h1>React</h1>
      <h2>{this.state.message}</h2>
      <form onSubmit={this.doSubmit} >
        <span style={this.inputStyle}></span>Message:
        <input type="text" style={this.inputStyle}
          onChange={this.doChange}
          value={this.state.text} // valueもstateからの参照
        />
        <input type="submit" style={this.inputStyle} value="Click"/>
      </form>
    </div>;
  }

Comments

[mikan_professor]

ご回答ありがとうございました。
先程自己解決しました。setState()をsetState=()としていたことが原因で、直したらうまく動きました。

[Hogeike]

確かにそこが根本原因でしたね。失礼いたしました。