'.onChange'方法未在React.js中获取'Input'的最新信息

Question

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

I can't get the current value of the input by onChange in Menu module .

In my code, the App has two child components - List & Menu . You can input the page in Menu component, so it will send Ajax() to get the info of the page. But the truth is: After I change the value of input like 1 -> 10, the ajax get the value of 1.

Before this, I know the difference between keyup or keydown and keypress . They have the difference cross browser. But I just want get the current value of the input By React.js .

Answer 1

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 that your input will update to the correct value on re-render.

Second, remember that setState is often asynchronous. So do not expect the state to be changed right after calling setState .

Your changeState method is good in this respect since it passes newState to singlePageRequest . However singlePageRequest does not use the supplied value and instead uses this.state.page . Change it to use the supplied value and you should be 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)
  })
}