Reactjs更新表

Question

我有2个脚本：

• table.js：呈现数据表
• os.js：返回操作系统名称

表中的数据正在使用json加载。样本json：

[
  {"server":"server1.com"},
  {"server":"server2.com"}
]

单击按钮时，表应检查服务器名称并更新相应的os数据。我该怎么办？

table.js：

import getOS from "./os.js";

class TableRow extends Component {
  constructor(props) {
   super(props);

   this.state= {label: ''};

   this.update = this.update.bind(this);
  }

  update(){
    getOS(servername);
  }

  render() {
    const { data } = this.props;

    const list = data.map(adata => {
      return (
        <tr>
          <td key={adata.server}>{adata.server}</td>
          <td key={adata.os}></td>
        </tr>
      )//return
    })//regionslist

    return (
      <React.Fragment>
      { list }
      <Button size="sm" type="submit" onClick= {this.update}>
            Get Details
      </Button>
      </React.Fragment>
    );//return
  } //render
} //class

Answer 1

如果您想在每一行中返回按钮，可以这样做：

class TableRow extends Component {
  constructor(props) {
    super(props);

    this.state = { label: '', data: this.props.data };
  }

  update = (servername) => {
    const data = getOS(servername);
    this.setState({ data });
  };

  render() {
    return this.state.data.forEach((adata) => {
      return (
        <React.Fragment>
          <tr>
            <td key={adata.server}>{adata.server}</td>
            <td key={adata.os} />
          </tr>
          <Button size="sm" type="submit" onClick={this.update(adata.server)}>
            Get Details
          </Button>
        </React.Fragment>
      );
    }); //return
  } //render
} //class