Question

我目前正在使用React中的某个表，并且在单击顶部单元格并且能够在列之间切换时，需要在列上具有选择状态。

在这个阶段，我粗略地把这样的东西放在一起：

const types = {
  one: 'one',
  two: 'two',
}

class Test extends Component {
  constructor(props) {
    super(props)
    this.onOneClick = this.onClick.bind(this, types.one)
    this.onTwoClick = this.onClick.bind(this, types.two)
  }

  onClick = column => {
    this.props.onColumnChange(column)
  }

  render() {
    const { column } = this.props
    const classOne = classnames(styles.one, column === types.one ? styles.active : null)
    const classTwo = classnames(styles.two, column === types.two ? styles.active : null)
    return (
      <section className={styles.columnSelection}>
        <table className={styles.columns}>
          <thead>
            <tr>
              <th>Select column</th>
              <td className={classOne} onClick={this.onOneClick}>one</td>
              <td className={classTwo} onClick={this.onTwoClick}>two</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th></th>
              <td className={classOne}>one</td>
              <td className={classTwo}>two</td>
            </tr>
            <tr>
              <th></th>
              <td className={classOne}>one</td>
              <td className={classTwo}>two</td>
            </tr>
          </tbody>
        </table>
      </section>
    )
  }
}

Test.propTypes = {
  column: PropTypes.oneOf(Object.values(types)),
  onColumnChange: PropTypes.func.isRequired,
}

我认为这可能会实现我想要的但是想知道是否有更好的方法可以做到这一点？我也不认为jQuery中有任何nth-child选择器可以帮助我。我需要这个表的原因几乎没有什么不同，所以我不打算改变HTML结构。

Answer 1

你可能做错了。在React中，您需要使用state才能维护组件状态。在click或任何其他事件上，您实际更新了该组件状态值。状态通常在constructor this.state={columns: 'one'}

中初始化

然后在render()方法中，您使用this.state.columns来检查和呈现或输出任何表达式，然后输出任何JSX / HTML。您可以使用三元操作，例如(this.state.columns=='two' ? 'It is two column' : 'its one column)。

在onclick或任何事件处理程序中，使用this.setState()更新组件的状态。

有关详细信息，请查看本指南：https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4

我真的建议您在进行真正的编码之前首先阅读其文档和示例。

Answer 2

为“.active”创建css样式以突出显示所选列并更改上述代码，例如

 class Test extends Component {
  constructor(props) {
    super(props)
    state={
        activeColumn : 0
    }
  }

  render() {

    return (
      <section className={styles.columnSelection}>
        <table className={styles.columns}>
          <thead>
            <tr>
              <th>Select column</th>
              <td className={this.state.activeColumn===1 ? "active":"" } onClick={()=>this.setState({activeColumn:1})}>one</td>
              <td className={this.state.activeColumn===2 ? "active":"" } onClick={()=>this.setState({activeColumn:2})}>two</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th></th>
              <td className={this.state.activeColumn===1 ? "active":"" }>one</td>
              <td className={this.state.activeColumn===2 ? "active":"" }>two</td>
            </tr>
            <tr>
              <th></th>
              <td className={this.state.activeColumn===1 ? "active":"" }>one</td>
              <td className={this.state.activeColumn===2 ? "active":"" }>two</td>
            </tr>
          </tbody>
        </table>
      </section>
    )
  }
}

React / JS切换表列

2 个答案: