我如何在React

Question

我是React的新手。 函数clickOnTableRow()由click事件使用（它将在单击时更改表的行颜色，并在单击另一行时恢复为原来的颜色），我想自动进行设置，因此我设置了自举开关。通过切换，表格行的颜色将每三秒钟自动逐行更改。我尝试再次从clickOnTableRow()致电switchHanlder()，但没有成功。还有另一种方法可以做到吗？

提前谢谢！！

class Student extends Component {
  state = {
    selectedRow: 0,
  }

  render () {
    return (
      <div>
        <label class="switch switch-pill switch-primary">
          <input type="checkbox" class="switch-input" checked onChange={this.switchHanlder}/>
          <span class="switch-slider" />
        </label>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody className="table-hover">
            {this.props.data.map((student, i) => {
              return (
                <tr key={i}
                    onClick={(e) => this.clickOnTableRow(i)}
                    className={this.state.selectedRow === i ? "table-selected" : "" }>
                  <td>{student.name}</td>
                  <td>{student.age}</td>
                  <td>{student.address}</td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </div>
    );
  }

  clickOnTableRow = (selectedRow) => {
    if (selectedRow !== undefined) {
      this.setState({ selectedRow });
    }
  };

  switchHanlder (e) {
    var selectedRow = 0;
    function f() {
      console.log("selectedRow:", selectedRow);
      this.clickOnTableRow(selectedRow); //it didn't work
      selectedRow++;
      if(selectedRow < 5 ){
        setTimeout(f, 3000);
      }
    }
    f();
  }
}

export default Student;

Answer 1

arrow函数表达式在语法上是常规函数表达式的紧凑选择，尽管没有自己绑定到this

class Student extends Component {
  state = {
    selectedRow: 0,
  }

  render () {
    return (
      <div>
        <label class="switch switch-pill switch-primary">
          <input type="checkbox" class="switch-input" checked onChange={this.switchHanlder}/>
          <span class="switch-slider" />
        </label>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody className="table-hover">
            {this.props.data.map((student, i) => {
              return (
                <tr key={i}
                    onClick={(e) => this.clickOnTableRow(i)}
                    className={this.state.selectedRow === i ? "table-selected" : "" }>
                  <td>{student.name}</td>
                  <td>{student.age}</td>
                  <td>{student.address}</td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </div>
    );
  }

  clickOnTableRow = (selectedRow) => {
    if (selectedRow !== undefined) {
      this.setState({ selectedRow });
    }
  };

  switchHanlder = (e) => {
    var selectedRow = 0;
    var _this = this
    function f() {
      console.log("selectedRow:", selectedRow);
      _this.clickOnTableRow(selectedRow); //it didn't work
      selectedRow++;
      if(selectedRow < 5 ){
        setTimeout(f, 3000);
      }
    }
    f();
  }
}

export default Student;

Answer 2

您还可以添加一个构造函数，我总是这样：

class Student extends Component {
  constructor(props){
    this.state = {
      selectedRow: 0,
    }
    this.clickOnTableRow = this.clickOnTableRow.bind(this)
    this.switchHanlder = this.switchHanlder.bind(this)
  }

  render () {
    return (
      <div>
        <label class="switch switch-pill switch-primary">
          <input type="checkbox" class="switch-input" checked onChange={this.switchHanlder}/>
          <span class="switch-slider" />
        </label>
        <Table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Address</th>
            </tr>
          </thead>
          <tbody className="table-hover">
            {this.props.data.map((student, i) => {
              return (
                <tr key={i}
                    onClick={(e) => this.clickOnTableRow(i)}
                    className={this.state.selectedRow === i ? "table-selected" : "" }>
                  <td>{student.name}</td>
                  <td>{student.age}</td>
                  <td>{student.address}</td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </div>
    );
  }

  clickOnTableRow = (selectedRow) => {
    if (selectedRow !== undefined) {
      this.setState({ selectedRow });
    }
  };

  switchHanlder (e) {
    var selectedRow = 0;
    function f() {
      console.log("selectedRow:", selectedRow);
      this.clickOnTableRow(selectedRow); //it didn't work
      selectedRow++;
      if(selectedRow < 5 ){
        setTimeout(f, 3000);
      }
    }
    f();
  }
}

export default Student;