鍍金池/ 問答/Linux  HTML/ react里input踩坑求助

react里input踩坑求助

為什么向輸入框輸入任何東西都顯示不出來？
完整代碼如下：

//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>
    );
回答
編輯回答
臭榴蓮

bind 應(yīng)該在 construtor 里面吧，這樣用

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

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

箭頭函數(shù)沒有 this，或者這樣：

<input className="inputArea" type="text" value={this.state.value} onChange={(e) => {
this.setState({value:e.target.value});}}/>
2017年4月23日 04:33
編輯回答
糖果果

changeTex=(event)=>{}

2017年1月30日 05:29
編輯回答
奧特蛋

不要bind(this)

2018年9月8日 02:56
編輯回答
默念

如果你不是要傳其他參數(shù)， 就直接這樣就好。bind onChange={this.changeText}

2018年6月29日 12:57
編輯回答
挽歌

我測試是可以的，你是不是有代碼沒放上來

2017年4月25日 08:54