'.onChange'方法没有't获取'输入'在React.js中

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

本文关键字：React 输入 js onChange 方法 获取      更新时间：2023-09-26
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((来获取页面的信息。但事实是：在我将input的值更改为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)
  })
}
相关文章：