如何使用 React 在按鈕單擊時附加表？

Question

我需要，當用戶點擊一個按鈕時，React 在該按鈕下呈現一個表格。 怎么做？

let a = '';

if (this.state.text) {
  a =
    <table border="1" width="40%" cellpadding="5">
      <tr>
        <th>Ячейка 1</th>
        <th>Ячейка 2</th>
      </tr>
      <tr>
        <td>Ячейка 3</td>
        <td>Ячейка 4</td>
      </tr>
    </table>
} else {
  a = ''
}

Answer 1

在您的組件中創建一個具有 onClick 事件偵聽器的按鈕。 然后，相應地調整您控制表格呈現的狀態變量（在您的情況下， text狀態變量）。

最后，在渲染函數中，根據狀態有條件地渲染表。

class App extends React.Component {
  constructor(props) {
    super(props)

    // State variables
    this.state = {
      // Controls table rendering
      text: true
    }
  }

  render() {
    return (
      <div>
        {/* Conditionally rendering table */}
        {
          this.state.text ? (
            <table>Table</table>
          ) : ''
        }

        {/* Button with onClick event listener */}
        <button onClick={() => this.setState((state) => {
          return { text: !state.text }
        })}>Button</button>
      </div>
    )
  }
}