如何重新呈现reactjs组件

如何使用此函数

this.messageSubmit

更新此属性

{this.state.username}

中子组件内的状态值，以及如何重新呈现子渲染以显示更改的状态值。请帮助我的任何人，因为我是reactjs

这是我的孩子组件

chating.js

    import React from "react";
    export class Chatting extends  React.Component{

    constructor(props){
      super(props);
      this.state={
        username: 'shiva'
      }
     this.messageSubmit=this.messageSubmit.bind(this);
      this.messageTextBox=this.messageTextBox.bind(this);
    }
         messageTextBox(event){
    this.setState=({
      username :event.target.value
    })

    }

    messageSubmit(){
    console.log(this.setState.username);
    }
      render(){
        return(
    <div>

    <div className="chat-decription">

    <div className="rt">


    <div className="talk-bubble tri-right btm-right">

      <div className="talktext">
        <p>Flush to the bottom right. Uses .btm-right only.</p>
      </div>
    </div>
    </div>

    <div className="fl">

    <div className="talk-bubble tri-right btm-right">

      <div className="talktext">
        <p>Flush to the bottom right. Uses .btm-right only.</p>
      </div>
    </div>
    </div>
    <div className="rt">

    <div className="talk-bubble tri-right btm-right">

      <div className="talktext">
        <p>  {this.setState.username}</p>

      </div>
    </div>
    </div>

    <div className="fl">

    <div className="talk-bubble tri-right btm-right">

      <div className="talktext">
        <p>Flush to the bottom right. Uses .btm-right only.</p>
      </div>
    </div>
    </div>
        </div>
    <div className="chat-textfiled">
    <input type="text" className="form-control text-form" onChange={this.messageTextBox}/>
    <input type="button" value="submit" onClick={this.messageSubmit}/>

    </div>
    </div>

        )
      }
    }

从“React”导入React；
导出类组件{
建造师（道具）{
超级（道具）；
这个州={
用户名：“湿婆”
}
this.messageSubmit=this.messageSubmit.bind（this）；
this.messageTextBox=this.messageTextBox.bind（this）；
}
messageTextBox（事件）{
这是我的国家=({
用户名：event.target.value
})
}
messageSubmit（）{
console.log（this.setState.username）；
}
render（）{
返回(
齐平到右下角。仅使用.btm right

齐平到右下角。仅使用.btm right

{this.setState.username}

齐平到右下角。仅使用.btm right

)
}
}

这是我的家长班

import React from "react";
import {render} from "react-dom";
import {Default} from "./component/Default";
import {Chatting} from "./component/Chatting";
import {BrowserRouter as Router,Route,Link,Switch } from 'react-router-dom';
// import Background from '../images/person_img.png';


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

}
  render(){
return(
  <Router>
                 <div className="container">
                 <div className="container-top">
                    <div className="col-lg-4 leftmenu-contact-bg">
                    <div className="searchbox">
                  <div className="textbox-bg">
                <input type="text" className="form-control" placeholder="Search"/>
                  </div>
                    </div>
                    <div className="ex1">
                    <a href="/chattting">
                    <div className="left-list">
                    <div  className="left-img"><i className="material-icons icon-color">person</i></div>
                    <div className="right-content">dgfg</div>
                </div>
                </a>

         </div>
                    </div>
                    <div className="col-lg-8 row">
                    <Switch>
                   <Route exact path='/' component={Default} />
                   <Route exact path='/chattting' component={Chatting} />

                </Switch>
                    </div>


                 </div>
                 </div>
              </Router>



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

从“React”导入React；
从“react dom”导入{render}；
从“/component/Default”导入{Default}；
从“/component/chating”导入{chating}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
//从“../images/person_img.png”导入背景；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
);
}
}
render（，document.getElementById（'app'））；

---

设置状态

是一个函数

你应该写：

this.setState({
  username: event.target.value
});

而且,代替

console.log(this.setState.username);

你应该写

console.log(this.state.username);

<p>{this.state.username}</p>

而且，再一次，不是：

<p>{this.setState.username}</p>

{this.setState.username}

你应该写

console.log(this.state.username);

<p>{this.state.username}</p>

{this.state.username}

除了@Rahamin的语法更正，还有几个指向代码的指针-

不应直接在渲染函数中调用

setState

，因为它将进入无限递归函数调用堆栈。您可能会被抛出一个超过最大更新深度的错误

另外，在设置状态的函数中直接使用

console.log

，不会提供所需的输出，因为它们已排队并进行了更新。最好在渲染本身中包含这样的

console.log

语句

最后，请用格式良好的代码发布问题：）