react里input踩坑求助

Question

为什么向输入框输入任何东西都显示不出来？
完整代码如下：

//css

.topApp {
        width:1200px;
        margin:0 auto;
        padding-top: 36px;
        .logoOne {
            float:left;
            width:109px;
            height:37px;
            img {
                width:100%;
            }
        }
        .logoTwo {
           
            text-align: center;
            border-left:1px solid #dfdfdf;
            float:left;
            width:100px;
            height:42px;
            margin-left: 12px;
            margin-right: 60px;
        }
        .searchWrap {
            float:left;
            width:569px;
            height:40px;
            margin-right: 46px;
            border-radius: 3px;
            border:1px solid #e6e6e6;
            font-size: 0;
            .searchIcon {
                float:left;
                display: table;
                height:40px;
                vertical-align: middle;
                line-height: inherit;
                padding:0 9px;
                p {
                    display: table-cell;
                    height: inherit;
                    vertical-align: middle;
                }
                img {
                    
                   
                }
            }
            .inputArea {
                float:left;
                display:inline-block;
                outline: none;
                height:37px;
                width:435px;
                border:none;
                color:red;
            }
            .searchBtn {
                width: 84px;
                height: 40px;
                margin-top: -1px;
                float:right;
                border:none;
                background-image: linear-gradient(128deg, 
                    #3294fc 0%, 
                    #1966ff 100%), 
                linear-gradient(
                    #1966ff, 
                    #1966ff);
                background-blend-mode: normal, 
                    normal;
                border-radius: 0px 3px 3px 0px;
            }
        }
    }

constructor(props) {
    super(props);
    this.state={
        value:'hello'
    }
   
  }
  
  changeText(event){
      this.setState({
         value:event.target.value
      });
  }

return (
      <div className={cls}>
          <div className="topApp clearfix">
                <div className="logoOne"><img src={this.props.logoOne}/></div>
                <div className="logoTwo"><img src={this.props.logoTwo}/></div>
                <div className="searchWrap">
                    <span className="searchIcon"><p><img src="https://img.alicdn.com/tfs/TB10jhFhcjI8KJjSsppXXXbyVXa-27-25.png"/></p></span>
                    <input className="inputArea" type="text" value={this.state.value} onChange={this.changeText.bind(this)}/>
                    <button className="searchBtn"><img src="https://img.alicdn.com/tfs/TB1OuDneOqAXuNjy1XdXXaYcVXa-18-17.png"/></button>
                </div>
                <div className="rightTab">
                   
                </div>
          </div>
      </div>
    );

Answer 1

我测试是可以的，你是不是有代码没放上来

Answer 2

bind 应该在 construtor 里面吧，这样用

changeText = (event) => {
  this.setState({
     value:event.target.value
  });
}

<input className="inputArea" type="text" value={this.state.value} onChange={this.changeText}/>

箭头函数没有 this，或者这样：

<input className="inputArea" type="text" value={this.state.value} onChange={(e) => {
this.setState({value:e.target.value});}}/>

Answer 3

changeTex=(event)=>{}

Answer 4

不要bind(this)

Answer 5

如果你不是要传其他参数， 就直接这样就好。bind onChange={this.changeText}