Javascript 在输入标记中键入文本时在标题标记中显示文本

我刚刚开始我的旅程，进入了React的世界，到目前为止我非常喜欢它。我终于开始掌握基本知识，并尝试创建一个简单的程序。 这个程序只需在文本框中输入内容，并将其实时显示在标题标记中。我似乎不明白为什么这不起作用。我将文本显示在控制台中，但不明白为什么它不显示在我的标记中。提前谢谢你的帮助。任何提示都非常感谢

class Header extends Component{
    render(){
        return(
            <div className = "header">
                <h1>Enter Your Name</h1>
            </div>
        )
    }
}

class Input extends Component{
    render(){
        return(
            <div className = "input_container">
                <input onChange = {this.props.onChange} className = "input_field" type = "text" placeholder = "Name..."></input>
            </div>
        )
    }
}

class App extends Component {
    state = {
        inputValue : ""
    }

    onChange = (e) => {
        console.log(e.target.value)
        this.setState = ({inputValue: e.target.value});
    }

    render(){
        return(
            <div>
            <Columns />
            <Input
                onChange = {this.onChange}/>
            <h2>{this.state.inputValue}</h2>
        </div>
        )
    }
}

类头扩展组件{
render（）{
返回(
输入您的姓名
)
}
}
类输入扩展组件{
render（）{
返回(
)
}
}
类应用程序扩展组件{
状态={
输入值：“
}
onChange=（e）=>{
console.log（例如target.value）
this.setState=（{inputValue:e.target.value}）；
}
render（）{
返回(
{this.state.inputValue}
)
}
}

设置状态的语法不正确。它是一个函数，而不是一个对象

this.setState ({ inputValue: e.target.value });

你的代码是

class App extends Component {
  state = {
    inputValue: ""
  };

  onChange = e => {
    console.log(e.target.value);
    this.setState({ inputValue: e.target.value });
  };

  render() {
    return (
      <div>
        <Input onChange={this.onChange} />
        <h2>{this.state.inputValue}</h2>
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
输入值：“
};
onChange=e=>{
console.log（如target.value）；
this.setState（{inputValue:e.target.value}）；
};
render（）{
返回(
{this.state.inputValue}
);
}
}