![](/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.