javascript - The '.onChange' method doesn't get the newest info of 'Input' in React.js -

import reqwest './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>   } } 

i can't current value of input onchange in menu module.

in code, app has 2 child components - list & menu. can input page in menu component, send ajax() info of page. truth is: after change value of input 1 -> 10, ajax value of 1.

before this, know difference between keyup or keydown , keypress. have difference cross browser. want current value of input react.js.

first, change:

<input type="text" defaultvalue={this.props.val} onchange={(event) => this.handlechange(event)} /> 

to:

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

so input update correct value on re-render.

second, remember setstate asynchronous. not expect state changed right after calling setstate.

your changestate method in respect since passes newstate singlepagerequest. singlepagerequest not use supplied value , instead uses this.state.page. change use supplied value , should ok:

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)   }) }