Javascript ReactJS:onClick（）动态渲染排序<；th>；元素

我正在将从API获取的数据打印到表中，在按字母和数字顺序对列值进行排序时遇到了一些困难。如果API中的列数据由数值组成，即

10.01、333.01、8.99或100.88

等，则在第一次单击时从

0->100

向上排序，第二次单击时从

100->0

向下排序，并按照相同的逻辑对字母值排序，即a-z和z-a，反之亦然

我熟悉的函数onclick=“sortTable（0）”在React中的功能与我在javaScript中编写的不一样。可能我误导了ES6标准，但我不确定

下面是我的代码示例，其中包含

onclick=“sortTable（0）”

，但它的功能不太好：

class App extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            rows: [],
            columns: [],
            clicked: false
        }

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

    handleClick()
    {
        this.setState( {
            clicked: true
        } );
    }


     sortTable( n )
{
            var table, columns, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
            table = document.getElementById( "datagrid" );
            switching = true;
            //Set the sorting direction to ascending:
            dir = "asc";
            /*Make a loop that will continue until
            no switching has been done:*/
            while ( switching )
            {
                //start by saying: no switching is done:
                switching = false;
                columns = table.getElementsByTagName( "TH" );
                /*Loop through all table rows (except the
                first, which contains table headers):*/
                for ( i = 1; i < ( columns.length - 1 ); i++ )
                {
                    //start by saying there should be no switching:
                    shouldSwitch = false;
                    /*Get the two elements you want to compare,
                    one from current row and one from the next:*/
                    x = columns[i].getElementsByTagName( "TH" )[n];
                    y = columns[i + 1].getElementsByTagName( "TH" )[n];
                    /*check if the two rows should switch place,
                    based on the direction, asc or desc:*/
                    if ( dir == "asc" )
                    {
                        if ( x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase() )
                        {
                            //if so, mark as a switch and break the loop:
                            shouldSwitch = true;
                            break;
                        }
                    } else if ( dir == "desc" )
                    {
                        if ( x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase() )
                        {
                            //if so, mark as a switch and break the loop:
                            shouldSwitch = true;
                            break;
                        }
                    }
                }
                if ( shouldSwitch )
                {
                    /*If a switch has been marked, make the switch
                    and mark that a switch has been done:*/
                    rows[i].parentNode.insertBefore( rows[i + 1], rows[i] );
                    switching = true;
                    //Each time a switch is done, increase this count by 1:
                    switchcount++;
                } else
                {
                    /*If no switching has been done AND the direction is "asc",
                    set the direction to "desc" and run the while loop again.*/
                    if ( switchcount == 0 && dir == "asc" )
                    {
                        dir = "desc";
                        switching = true;
                    }
                }
            }
        }

    componentDidMount()
    {

        fetch( "http://ickata.net/sag/api/staff/bonuses/" )
            .then( function ( response )
            {
                return response.json();
            } )
            .then( data =>
            {
                this.setState( { rows: data.rows, columns: data.columns } );
            } );

    }

    render()
    {

        return (
            <div id="container" className="container">
                <h1>Final Table with React JS</h1>
                <table className="datagrid">
                    <thead>
                        <tr> {
                            this.state.columns.map(( column, index ) =>
                            {
                                return ( <th onClick={this.handleClick}>{column}</th> )
                            }
                            )
                        }
                        </tr>
                    </thead>
                    <tbody> {
                        this.state.rows.map( row => (
                            <tr>{row.map( cell => (
                                <td>{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}</td>
                            ) )}
                            </tr>
                        ) )
                    }
                    </tbody>
                </table>
            </div>
        )
    }
}


ReactDOM.render( <div id="container"><App /></div>, document.querySelector( 'body' ) );

类应用程序扩展了React.Component
{
构造函数（）
{
超级（）；
此.state={
行：[]，
列：[]，
单击：false
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）
{
此.setState（{
点击：对
} );
}
可排序（n）
{
变量表，列，切换，i，x，y，shouldSwitch，dir，switchcount=0；
table=document.getElementById（“datagrid”）；
切换=真；
//将排序方向设置为升序：
dir=“asc”；
/*做一个循环，循环将持续到
未进行任何切换：*/
while（切换）
{
//首先说：未进行任何切换：
切换=错误；
columns=table.getElementsByTagName（“TH”）；
/*循环遍历所有表行（除
首先，它包含表标题）：*/
对于（i=1；i<（columns.length-1）；i++）
{
//首先说，不应进行切换：
shouldSwitch=false；
/*获取要比较的两个元素，
一个来自当前行，另一个来自下一行：*/
x=列[i].getElementsByTagName（“TH”）[n]；
y=列[i+1].getElementsByTagName（“TH”）[n]；
/*检查两排是否应交换位置，
根据方向，asc或desc：*/
如果（目录==“asc”）
{
if（x.innerHTML.toLowerCase（）>y.innerHTML.toLowerCase（））
{
//如果是，标记为开关并断开回路：
shouldSwitch=true；
打破
}
}否则，如果（dir==“desc”）
{
if（x.innerHTML.toLowerCase（）
{
this.setState（{rows:data.rows，columns:data.columns}）；
} );
}
render（）
{
返回(
带有React JS的最终表格
{
this.state.columns.map（（列，索引）=>
{
返回（{column}）
}
)
}
{
this.state.rows.map（row=>(
{row.map（单元格=>(
{typeof cell=='number'？cell.toFixed（2）：cell}
) )}
) )
}
)
}
}
ReactDOM.render（

在使用
onclick=“sortTable（0）”之后，我的示例在控制台中没有显示任何错误，但它打印了相同的结果。我想我没有正确处理
{column}元素


不幸的是，我无法在网站上找到相关文档

它根本不起onClick事件的作用，因此我也无法调试sor功能

如果您有任何建议，我们将不胜感激！
onClick=（）=>this.sortable（0）。如果您在这种情况下使用任何类型的循环，那么您就没有
renderRows() {
  const sortFn = getSortFunction(this.state.sort); // defined elsewhere

  // shallow copy so we don't mutate the state
  return [ ...this.state.rows ]
    .sort(sortFn)
    .map((row, i) => (
      <tr key={i}>
        { row.map((cell, j) => <td key={j}>{ cell }</td>) }
      </tr>
    ));
}

render() {
  return (
    <table>
      <thead>{ renderHeader() }</thead>
      <tbody>{ renderRows() }</tbody>
    </table>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));