![](/img/trans.png)
[英]Can't get autocompleted inputs in React.js form with onChange
[英]The '.onChange' method doesn't get the newest info of 'Input' in 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>
}
}
我無法通過Menu module
的onChange
獲取input
的當前值。
在我的代碼中,該應用程序有兩個子組件- List
和Menu
。 您可以在Menu
組件中輸入頁面,這樣它將發送Ajax()以獲得頁面信息。 但事實是:我將輸入的值更改為1-> 10后,ajax的值為1。
在此之前,我知道keyup
或keydown
和keypress
之間的區別。 它們具有跨瀏覽器的區別。 但是我只想通過React.js獲取輸入的當前值 。
首先,更改:
<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)
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.