无法使用react js

时间:2018-07-09 13:01:14

标签: javascript reactjs

尝试获取第一列或第四列中的复选框(以选择表中的记录),请尝试使用jscomplete在线工具中的以下代码来运行react js组件。

我试图在数据网格的一栏中获取复选框,当我将列名设为menuCheckBox时,无法进入Datatable组件的if条件。

能帮我吗?我正在尝试该示例,因为我是新来响应js的人。

非常感谢您。

enter image description here

var data = [
  {
    firstName: "Camden",
    lastName: "Hubbard",
    city: "San Francisco"
  },
  {
    firstName: "Lillian",
    lastName: "Garrison",
    city: "San Francisco"
  },
  {
    firstName: "Magee",
    lastName: "Mckinney",
    city: "Indianapolis"
  }
];

var columns = [
  { firstName: "First Name" },
  { lastName: "Last Name" },
  { city: "City" },
  { menuCheckBox: true }
];

class DataTable extends React.Component {
  render() {
    var self = this;

    var order = this.props.cols.map(function(column) {
      return Object.keys(column);
    });

    var width = 100 / this.props.cols.length;

    var dataRows = this.props.rows.map(function(row, key) {
      return (
        <tr key={key}>
          {order.map(function(k) {
            // tried the below if condition to check if the column is
            //menuCheckBox to render the check box but unable to get
            if (k === "menuCheckBox") {
              return (
                <td key={k + "-" + key} width={width + "%"}>
                  <input type="checkbox" />
                </td>
              );
            }

            return (
              <td key={k + "-" + key} width={width + "%"}>
                {row[k]}
              </td>
            );
          })}
        </tr>
      );
    });

    var dataHeaders = order.map(function(k, index) {
      return (
        <th width={width + "%"} key={k} ref={k}>
          <div className="col-xs-11 row header">
            {self.props.cols[index][k]}
          </div>
        </th>
      );
    });

    return (
      <table>
        <thead>
          <tr>{dataHeaders}</tr>
        </thead>
        <tbody>{dataRows}</tbody>
      </table>
    );
  }
}

class DataGrid extends React.Component {
  render() {
    return (
      <div className="table table-bordered">
        <DataTable rows={data} cols={columns} />
      </div>
    );
  }
}

ReactDOM.render(<DataGrid />, mountNode);

0 个答案:

没有答案