Javascript 改变反应中的状态

我正在学习React，作为一个学习练习，我正在尝试做一个非常基本的页面，其中有一个表单，您将文本放入输入框，单击submit，标题将更改为您输入的内容。以下是我目前的代码：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {header: 'yeaheheh'}
  }
  changeHeader(e) {
    let newHeader = document.getElementById('input').value();
    e.preventDefault();
    console.log('submitted');
    this.setState(newHeader);
  }
  render() {
    return (
      <div>
            <h1>{this.state.header}</h1>
            <form onSubmit={this.changeHeader.bind(this)} className="change-header-form">
                <input id="input" type="text" placeholder="Enter Text Here" />
                <input type="submit" value="Submit" />
            </form>
          </div>  
    );
  }
}

export default App;

改成

<form onSubmit={this.changeHeader.bind(this)}...

---

替换
此.setState（newHeader）this.setState（{header:newHeader}）的code>
替换
此.setState（newHeader）this.setState（{header:newHeader}）的code>
在react文档中查看这篇文章：

基本上，您要做的是为输入创建另一个处理程序。每次对输入字段进行更改时，都会调用此函数，并且将更新
状态中的属性。然后，当您提交表单时，您可以使用该新属性并使用
setState
将其“合并”为新标题


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“Yeahehehh”，
下一步：“”
}
this.changeHeader=this.changeHeader.bind（this）；
this.updateNext=this.updateNext.bind（this）；
}
变更标题（e）{
e、 预防默认值（）；
这是我的国家({
标题：this.state.next
});
}
updateNext（e）{
这是我的国家({
下一个：e.target.value
});
}
render（）{
返回(
{this.state.header}
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

也许这个bin会提供一个更好的上下文来解释我试图描述的内容。
请看react docs:中的这篇文章

基本上，您要做的是为输入创建另一个处理程序。每次对输入字段进行更改时，都会调用此函数，并且将更新
状态中的属性。然后，当您提交表单时，您可以使用该新属性并使用
setState
将其“合并”为新标题


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“Yeahehehh”，
下一步：“”
}
this.changeHeader=this.changeHeader.bind（this）；
this.updateNext=this.updateNext.bind（this）；
}
变更标题（e）{
e、 预防默认值（）；
这是我的国家({
标题：this.state.next
});
}
updateNext（e）{
这是我的国家({
下一个：e.target.value
});
}
render（）{
返回(
{this.state.header}
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

也许这个垃圾箱会为我要描述的内容提供更好的上下文。
您设置的状态不正确。
更多信息：要从输入字段中获取数据，您可以使用
受控的
输入元素（通过状态）或
非受控的
输入元素（通过“ref”，我在下面的示例中使用了这些元素

在受控输入元素中，您将输入元素的值存储在状态中，并通过调用
onChange
方法，然后通过
this.setState（{}）
设置状态来更改该值

调用
setState
会导致重新呈现，并且
dom
会根据新状态获取更新的数据

顺便说一句，“refs”可以直接访问dom元素，与
jquery
中使用的
$（）
类似，如果可能，应该避免使用，因为这将导致非常难以管理和预测
dom
的更改

此外，在某些情况下，建议使用“REF”

REF有几个很好的用例：


管理焦点、文本选择或媒体播放

触发命令式动画

与第三方DOM库集成



类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={header:'yeahehehh'}；
}
changeHeader=（e）=>{
e、 预防默认值（）；
让newHeader=this.textInput.value；
console.log（'submitted'）；
this.setState（{header:newHeader}）；
}
render（）{
返回(
{this.state.header}
{this.textInput=input；}}type=“text”placeholder=“在此处输入文本”/>
);
}
}
ReactDOM.render（，document.getElementById（'test'））
您设置的状态不正确。
更多信息：要从输入字段中获取数据，您可以使用
受控的
输入元素（通过状态）或
非受控的
输入元素（通过“ref”，我在下面的示例中使用了这些元素

在受控输入元素中，您将输入元素的值存储在状态中，并通过调用
onChange
方法，然后通过
this.setState（{}）
设置状态来更改该值

调用
setState
会导致重新呈现，并且
dom
会根据新状态获取更新的数据

顺便说一句，“refs”可以直接访问dom元素，与
jquery
中使用的
$（）
类似，如果可能，应该避免使用，因为这将导致非常难以管理和预测
dom
的更改

此外，在某些情况下，建议使用“REF”

REF有几个很好的用例：


管理焦点、文本选择或媒体播放

触发命令式动画

与第三方DOM库集成



类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={header:'yeahehehh'}；
}
changeHeader=（e）=>{
e、 预防默认值（）；
让newHeader=this.textInput.value；
console.log（'submitted'）；
this.setState（{header:newHeader}）；
}
render（）{
返回(
{this.state.header}
<form onSubmit={this.changeHeader.bind(this)}...

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      header: 'yeaheheh',
      next: ''
    }

    this.changeHeader = this.changeHeader.bind(this);
    this.updateNext = this.updateNext.bind(this);
  }

  changeHeader(e) {
    e.preventDefault();

    this.setState({
      header: this.state.next
    });
  }

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

  render() {
    return (
      <div>
        <h1>{this.state.header}</h1>
        <form onSubmit={this.changeHeader} className="change-header-form">
          <input id="input" type="text" placeholder="Enter Text Here" onChange={this.updateNext} />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app')); 

<input value={ this.state.inputValue }
       onChange={ e => this.setState({ inputValue : e.target.value }) }
/>

constructor(props) {
    super(props); 
    _that = this;
  }

  changeHeader = (e) => {
     e.preventDefault();
    let newHeader = this.textInput.value;
    console.log('submitted');
    _that.setState({header : newHeader});
  }