Javascript 如何使用reactjs在表中添加复选框_Javascript_Html_Reactjs

Javascript 如何使用reactjs在表中添加复选框

javascript html reactjs

Javascript 如何使用reactjs在表中添加复选框,javascript,html,reactjs,Javascript,Html,Reactjs,我试图做的是，我想使用react js在表中设置复选框。但在我的下面，首先无法显示复选框。我正在尝试在我的下面代码中执行is n操作，但在我的下面代码中无法执行is n操作，并且我还希望使用reactjs在表中创建一个submit按钮谁能帮我解决这个问题。我被这件事缠住了，真是太感谢了帮她查一下我的密码类TableComponent扩展了React.Component{ 状态={}； HandlerRowClick=async（rowID）=>{ //在这里进行API调用，比如 conso

我试图做的是，我想使用react js在表中设置复选框。但在我的下面，首先无法显示复选框。我正在尝试在我的下面代码中执行is n操作，但在我的下面代码中无法执行is n操作，并且我还希望使用reactjs在表中创建一个submit按钮

谁能帮我解决这个问题。我被这件事缠住了，真是太感谢了

帮她查一下我的密码

类TableComponent扩展了React.Component{
状态={}；
HandlerRowClick=async（rowID）=>{
//在这里进行API调用，比如
console.log（rowID）
常量url1=”https://grandiose-mulberry-garnet.glitch.me/query?id=“+rowID；
常量url2=”https://grandiose-mulberry-garnet.glitch.me/params/“+rowID；
//常量url=”https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
//您可以使用上述任何API进行测试。
const response=wait fetch（url1）；
const res=wait response.json（）；
//console.log（res）
这是我的国家({
…res，
});
打开（res.url，“u blank”）；
};
render（）{
var dataColumns=this.props.data.columns；
var dataRows=this.props.data.rows；
var tableHeaders=(
{" "}
{dataColumns.map（函数（列）{
返回{column}；
})}{" "}
{" "}
);
var tableBody=dataRows.map（（行）=>{
返回(
this.handleRowClick（row.id）}键={row.id}>
{" "}
{dataColumns.map（函数（列）{
返回(
{" "}
);
})}{" "}
);
});
//用引导CSS装饰
返回(
{" "}
{tableHeaders}{tableBody}{”“}
);
}
}
//示例数据
var表格数据={
列：[“选择”、“服务名称”、“成本/单位”]，
行：[{
“服务名称”：“飞机”，
“成本/单位”：50，
“id”：1
}, {
“服务名称”：“类别”，
“成本/单位”：50，
“id”：2
},{
“服务名称”：“水果”，
“成本/单位”：50，
“id”：5
}, {
“服务名称”：“池”，
“成本/单位”：50，
“id”：4
}]
};
ReactDOM.render(
,
document.getElementById（'table-component'））
);

我对代码做了一些调整，在“选择”列中添加了复选框

  class TableComponent extends React.Component {
  state = {};

  handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID)
    const url1 = "https://grandiose-mulberry-garnet.glitch.me/query?id="+rowID;
    const url2 = "https://grandiose-mulberry-garnet.glitch.me/params/"+rowID;
    // const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
    // you can use any of the above API to test.
    const response = await fetch(url1);
    const res = await response.json();
    // console.log(res)
    this.setState({
      ...res,
    });
    window.open(res.url, '_blank');
  };

  render() {
    var dataColumns = this.props.data.columns;
    var dataRows = this.props.data.rows;

    var tableHeaders = (
      <thead>
        <tr>
          {" "}
          {dataColumns.map(function (column) {
            return <th> {column} </th>;
          })}{" "}
        </tr>{" "}
      </thead>
    );

    var tableBody = dataRows.map((row) => {
      return (
        <tr onClick={() => this.handleRowClick(row.id)} key={row.id}>
          {dataColumns.map(function (column) {
            if(column == 'Select')
              return (
              <td>
                 <input type="checkbox" />
              </td>
            );
            else
            return (
              <td>
                <a target="_blank" rel="noopener noreferrer" href={row.url}>
                  {
                      row[column]
                  }
                </a>
              </td>
            );
          })}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      
       <div>
  <table className="table table-bordered table-hover" width="100%">
    {tableHeaders} {tableBody}
  </table>
    <input type="submit" value="submit" />
    </div>
     
    );
  }
}
 
// Example Data
var tableData = {
  
 columns: ['Select','Service_Name', 'Cost/Unit'],
  rows: [{
    'Service_Name': 'airplan',
    'Cost/Unit': 50,
    'id': 1
   
  }, {
    'Service_Name': 'cat',
    'Cost/Unit': 50,
    'id': 2
  },{
    'Service_Name': 'fruits',
    'Cost/Unit': 50,
    'id': 5
  }, {
    'Service_Name': 'pool',
    'Cost/Unit': 50,
    'id': 4
  }]
};
 

ReactDOM.render(
  <TableComponent data = {tableData} />,
  document.getElementById('table-component')

);

类TableComponent扩展了React.Component{
状态={}；
HandlerRowClick=async（rowID）=>{
//在这里进行API调用，比如
console.log（rowID）
常量url1=”https://grandiose-mulberry-garnet.glitch.me/query?id=“+rowID；
常量url2=”https://grandiose-mulberry-garnet.glitch.me/params/“+rowID；
//常量url=”https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
//您可以使用上述任何API进行测试。
const response=wait fetch（url1）；
const res=wait response.json（）；
//console.log（res）
这是我的国家({
…res，
});
打开（res.url，“u blank”）；
};
render（）{
var dataColumns=this.props.data.columns；
var dataRows=this.props.data.rows；
var tableHeaders=(
{" "}
{dataColumns.map（函数（列）{
返回{column}；
})}{" "}
{" "}
);
var tableBody=dataRows.map（（行）=>{
返回(
this.handleRowClick（row.id）}键={row.id}>
{dataColumns.map（函数（列）{
如果（列==“选择”）
返回(
);
其他的
返回(
);
})}
);
});
//用引导CSS装饰
返回(
{tableHeaders}{tableBody}
);
}
}
//示例数据
var表格数据={
列：[“选择”、“服务名称”、“成本/单位”]，
行：[{
“服务名称”：“空中计划”，
“成本/单位”：50，
“id”：1
}, {
“服务名称”：“类别”，
“成本/单位”：50，
“id”：2
},{
“服务名称”：“水果”，
“成本/单位”：50，
“id”：5
}, {
“服务名称”：“池”，
“成本/单位”：50，
“id”：4
}]
};
ReactDOM.render(
,
document.getElementById（'table-component'））
);

就像一个复选框，可以添加提交按钮。

有人帮我吗？？非常感谢。我会用反应表：谢谢reply@AjeetShah但是我试着在我的代码中实现这一点，但不起作用cna u plz在这里给我看一些东西我的代码非常感谢我的代码感谢这一点，以及如何在表外添加一个提交按钮？？？@shivanipandey你想要每行提交按钮吗？不是表外的每行我想要只有一个按钮怎么做？@snehalu能帮我吗？代码中做了一些更改，你可以检查一下。

  class TableComponent extends React.Component {
  state = {};

  handleRowClick = async (rowID) => {
    // make an API call here, sth like
    console.log(rowID)
    const url1 = "https://grandiose-mulberry-garnet.glitch.me/query?id="+rowID;
    const url2 = "https://grandiose-mulberry-garnet.glitch.me/params/"+rowID;
    // const url = "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54";
    // you can use any of the above API to test.
    const response = await fetch(url1);
    const res = await response.json();
    // console.log(res)
    this.setState({
      ...res,
    });
    window.open(res.url, '_blank');
  };

  render() {
    var dataColumns = this.props.data.columns;
    var dataRows = this.props.data.rows;

    var tableHeaders = (
      <thead>
        <tr>
          {" "}
          {dataColumns.map(function (column) {
            return <th> {column} </th>;
          })}{" "}
        </tr>{" "}
      </thead>
    );

    var tableBody = dataRows.map((row) => {
      return (
        <tr onClick={() => this.handleRowClick(row.id)} key={row.id}>
          {dataColumns.map(function (column) {
            if(column == 'Select')
              return (
              <td>
                 <input type="checkbox" />
              </td>
            );
            else
            return (
              <td>
                <a target="_blank" rel="noopener noreferrer" href={row.url}>
                  {
                      row[column]
                  }
                </a>
              </td>
            );
          })}
        </tr>
      );
    });

    // Decorate with Bootstrap CSS
    return (
      
       <div>
  <table className="table table-bordered table-hover" width="100%">
    {tableHeaders} {tableBody}
  </table>
    <input type="submit" value="submit" />
    </div>
     
    );
  }
}
 
// Example Data
var tableData = {
  
 columns: ['Select','Service_Name', 'Cost/Unit'],
  rows: [{
    'Service_Name': 'airplan',
    'Cost/Unit': 50,
    'id': 1
   
  }, {
    'Service_Name': 'cat',
    'Cost/Unit': 50,
    'id': 2
  },{
    'Service_Name': 'fruits',
    'Cost/Unit': 50,
    'id': 5
  }, {
    'Service_Name': 'pool',
    'Cost/Unit': 50,
    'id': 4
  }]
};
 

ReactDOM.render(
  <TableComponent data = {tableData} />,
  document.getElementById('table-component')

);