的「.onChange」的方法並沒有得到‘輸入’的最新信息在React.js

import reqwest from './public/reqwest.js' 

const PAGE_SIZE = 10 

class App extends Component { 
    constructor() { 
    super() 
    this.state = { 
     page: 1, 
     arr: [] 
    } 
    } 

    singleInfo(page) { 
    reqwest({ 
     url: 'https://cnodejs.org/api/v1/topics', 
     data: { 
     limit: PAGE_SIZE, 
     page: this.state.page 
     }, 
     success: function (data) { 
     this.setState({ 
      arr: data.data 
     }) 
     }.bind(this) 
    }) 
    } 

    changeState(newState) { 
    this.setState(newState) 

    this.singleInfo(newState.page) 
    } 

    render() { 
    return (
     <div> 
     <Menu val={this.state.page} changeParentState={(state) => this.changeState(state)} /> 
     <List arr={this.state.arr} /> 
     </div> 
    ); 
    } 
} 

class Menu extends Component { 
    handleChange(event) { 
    if(event.target.value) { 
     this.props.changeParentState({ 
     page: event.target.value 
     }) 
    } 
    } 

    render() { 
    console.log(this) 
    return <input type="text" defaultValue={this.props.val} onChange={(event) => this.handleChange(event)} /> 
    } 
} 

class List extends Component { 
    render() { 
    return <ul> 
     { 
      this.props.arr.map((ele) => { 
      return (
       <li key={ ele.id }> 
       <p className="title">{ ele.title }</p> 
       <p className="date">{ ele.create_at }</p> 
       <p className="author">{ ele.author.loginname }</p> 
       </li> 
      ) 
      }) 
     } 
    </ul> 
    } 
}

我不能onChange在Menu module得到input的當前值。的「.onChange」的方法並沒有得到‘輸入’的最新信息在React.js

在我的代碼中，應用程序有兩個子組件 - List & Menu。你可以在Menu組件中輸入頁面，所以它會發送Ajax（）來獲取頁面的信息。但事實是：在我改變輸入的值如1 - > 10後，阿賈克斯得到的值爲1.在此之前，我知道keyup或和keypress之間的差異。他們有不同的跨瀏覽器。但我只是想要獲得輸入的當前值通過React.js。

來源

2016-08-01 TomIsion

您可以設置一個可用的JSBin示例嗎？ – Timo

首先，改變：

<input type="text" defaultValue={this.props.val} onChange={(event) => this.handleChange(event)} />

要：

<input type="text" value={this.props.val} onChange={(event) => this.handleChange(event)} />

讓您的輸入將更新到正確的值重新渲染。

其次，請記住setState通常是異步的。所以不要指望在撥打setState之後立即改變狀態。

您的changeState方法在這方面很好，因爲它通過newState到singlePageRequest。但是singlePageRequest不使用提供的值，而是使用this.state.page。將其更改爲使用提供的值，您應該可以：

singleInfo(page) { 
    reqwest({ 
    url: 'https://cnodejs.org/api/v1/topics', 
    data: { 
     limit: PAGE_SIZE, 
     page: page 
    }, 
    success: function (data) { 
     this.setState({ 
     arr: data.data 
     }) 
    }.bind(this) 
    }) 
}

來源

2016-08-01 14:08:00 Brandon

'setState'通常是異步的。我明白。謝謝〜 – TomIsion

的「.onChange」的方法並沒有得到‘輸入’的最新信息在React.js

回答

相關問題