Question

我有一个HTML表，我想创建一个函数，该函数接受具有特定ID的行，并将其移到表的顶部。我什至不知道从哪里开始，但这是我正在使用的代码：

function App() {

  function changeRow(id){
    //Move row with "id" to top of table
  }

  return (
    <div className="App">
      <table>
        <tbody>
          <tr id='row1'>
            <td><b>Value 1</b></td>
            <td>Description 1</td>
            <td><button onClick={()=>changeRow('row1')}>Change Row</button></td>
          </tr>
          <tr id='row2'>
            <td><b>Value 2</b></td>
            <td>Description 2</td>
            <td><button onClick={()=>changeRow('row2')}>Change Row</button></td>
          </tr>
          <tr id='row3'>
            <td><b>Value 3</b></td>
            <td>Description 3</td>
            <td><button onClick={()=>changeRow('row3')}>Change Row</button></td>
          </tr>
          <tr id='row4'>
            <td><b>Value 4</b></td>
            <td>Description 4</td>
            <td><button onClick={()=>changeRow('row4')}>Change Row</button></td>
          </tr>
        </tbody>
      </table>

    </div>
  );
}

这是代码沙箱：

https://codesandbox.io/s/thirsty-leftpad-vvrmz

谢谢！

Answer 1

避免对数据进行硬编码-将其存储在例如对象数组，对其进行调整会容易得多。

然后-在tf.data字段中应用状态。然后对数组进行排序并呈现。

https://codesandbox.io/s/polished-resonance-oo063

activeId

class App extends React.Component {
  state = {
    activeRowId: null
  };
  changeRow = id => {
    this.setState({ activeRowId: id });
  };

  render() {
    const arr = [
      { id: "row1", value: "value1" },
      { id: "row2", value: "value2" },
      { id: "row3", value: "value3" },
      { id: "row4", value: "value4" }
    ];
    const elements = arr
      .sort(
        (a, b) =>
          +(this.state.activeRowId === b.id) -
          +(this.state.activeRowId === a.id)
      )
      .map(elem => (
        <tr id="row1">
          <td>
            <b>{elem.value}</b>
          </td>
          <td>{elem.value}</td>
          <td>
            <button onClick={() => this.changeRow(elem.id)}>Change Row</button>
          </td>
        </tr>
      ));
    return (
      <div className="App">
        <table>
          <tbody>{elements}</tbody>
        </table>
      </div>
    );
  }
}

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

Answer 2

使用不同类型的反应功能和能力，例如：

代码中的注释：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// create a row component so we dont repeat the same thing over and over again
// that's the reason why we are using react btw
function Row(row) {
  const {changeRow, val, desc, id} = row;
  return  <tr id={id}>
    <td>
      <b>{val}</b>
    </td>
    <td>{desc}</td>

    /**  if changeRow is not define, don't show the button (this is for the top row) **/
    { changeRow && <td>
      <button onClick={() => changeRow(row)}>Change Row</button>
    </td>}
  </tr>
}

function App() {
  // store a top row as state
  const [topRow, setTopRow] = useState(null)

  // store rows as state so you can modify (add/remove) them
  const [rows, setRows] = useState([{
    id: 'row1',
    val: 'Value 1',
    desc: 'Description: 1',
  }, {
    id: 'row2',
    val: 'Value 2',
    desc: 'Description: 2',
  }])

  // function to change row
  function changeRow(row) {
    // set the data for top row
    setTopRow(row)

    // filter it so we remove the selected row on the rows list
    const rows = rows.filter(rowItem => rowItem.id === row.id)
    setRows(rows)
  }

  function getTopRow() {

    // if toprow is null (initial value) return nothing
    if (!topRow) {
      return null;
    }

    // return it as a row
    return <Row val={topRow.val} desc={topRow.desc} id={topRow.id} />
  }

  return (
    <div className="App">

      {getTopRow() // we call the top row here}
      <table>
        <tbody>
          {rows.map((row) => <Row {...row}  changeRow={changeRow}/>)  // map them to avoid that repetitive html code }
        </tbody>
      </table>
    </div>
  );
}

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

React.js在表格顶部插入特定行

2 个答案: