如何将数据从一个组件Ajax响应传递到另一个组件状态reactjs?

时间:2019-12-21 13:45:45

标签: javascript reactjs

我有两个组成部分。

Emp.js

class Emp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employee: {
        first_name: '',
        last_name: '',
        phone_number: '',
        hire_date: '',
        salary: '',
        email: '',
        manager: null,
        department: {
          department_id: 102
        }
      }
    };

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

Table.js

class Table extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    }
    this.handleClick = this.handleClick.bind(this);
    this.editClick = this.editClick.bind(this);
  }}

在table.js中,有一个编辑按钮调用此处理程序。

此editClick从ajax获取值并填充表单以进行编辑。

editClick() {
    let employee_id = event.target.value;
    console.log('edit emp:', employee_id);
    $.ajax({
      type: 'GET',
      url: 'getEmp/' + employee_id,
      dataType: 'json',
      data: { employee_id: employee_id },
      async: true,
      success: function (result) {
        //populate empForm 
        var form = $("#empForm");
        var i;
        for (i in result) {
          form.find('[name="' + i + '"]').val(result[i]);
        }

      },
      error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.status + ' ' + jqXHR.responseText);
      }
    });
  }

如何将该结果值从Table类编辑设置为Emp类的状态?

将ajax的结果从表组件设置为Emp组件状态?

0 个答案:

没有答案