Question

我做了一个示例，我的反应从API获取数据。

我有以下模型

对象列表 - 对象 ---选择字段

这是我的OrdersList.jsx

import React from 'react';
import Order from './Order';

class OrdersList extends React.Component {

  constructor(props) {
    super(props)
    this.state = { data: [] }
  }
  componentDidMount() {

    $.ajax({
      url: '/api/v1/orders',
      success: data => this.setState({ data: data }),
      error: error => console.log(error)
    })
  }

  render() {
    return (
      <div className="row">
        <div className="col s12">
          <table className="floatThead bordered highlight">
            <thead>
              <tr>
                <th>id</th>
                <th>status</th>
              </tr>
            </thead>
            <Order data = { this.state.data } />
          </table>
        </div>
      </div>
    )
  }

}

export default OrdersList;

这是我的Order.jsx（它有Item to list和ItemStatus）

import React from 'react'

class OrderStatus extends React.Component {
  constructor(props) {
    super(props)
    this.state = { data: [] }
  }

  handleChange(event) {
    let data = {
      order: {
        status: event.target.value
      }
    }
    console.log(event)
    $.ajax({
      method: 'PUT',
      url: `/api/v1/orders/${event.target.id}`,
      data: data,
      success: data => (console.log(data), this.setState({ data: data })),
      error: error => console.log(error)
    })

  }
  render() {

    return (
      <div className="row">
        <div className="input-field">
          <p>status: {this.props.data.status}</p>
          <select value={ this.props.data.status } id={ this.props.data.id } onChange={ this.handleChange } className="browser-default" >
            <option value='neworder'>new</option>
            <option value='pendingorder'>pending</option>
            <option value='sentorder'>sent</option>
            <option value='completedorder'>done</option>
          </select>
        </div>
      </div>
    )
  }
}

class Order extends React.Component {
  constructor(props) {
    super(props)
    this.state = { data: [] }
  }

  render() {
    return (
      <tbody>
        {
          this.props.data.map(
            order =>
            <tr key={order.id}>
              <td>
                # {order.id}
              </td>
              <td>
                <OrderStatus data={ order } />
              </td>
            </tr>
          )
        }
      </tbody>
    )
  }
}

export default Order;

我无法理解的是如何在ajax回调中更新我的项目状态（后端有更新，它工作正常，但如何更新我的地图函数列出的子项目的状态） ..感谢您的投入！

Answer 1

您的代码看起来很好，您只是缺少绑定语句。

将以下内容添加到构造函数中，它应该可以工作：

this.handleChange = this.handleChange.bind(this);

供参考，请查看link。

反应状态与复杂结构的道具

1 个答案: