响应按钮的 Onclick 事件

Question

您好，我正在尝试为函数创建按钮以调用每个函数。当用户单击按钮时将调用该函数并向用户显示相关输出我是 React 的新手，我正在尝试找到解决此问题的方法。

class Counter extends Component{
state = {
studentArr: [
        {name:"name1",is_teacher: true, nick_name: "SupremeShushan", age: 31},
        {name:"name2",is_teacher: false, nick_name: "dd", age: 87},
        {name:"name3",is_teacher: false, nick_name: "Bing", age: 44},
        {name:"name4",is_teacher: false, nick_name: "Chains", age: 27},
        {name:"name5",is_teacher: true, nick_name: "Jp", age: 58},
        {name:"name6",is_teacher: false, nick_name: "Unix", age: 50},
        {name:"name7",is_teacher: false, nick_name: "Grouch", age: 33}]
};
     converBool(val){ // convert is_Teacher (boolean) and check if true or false and return value
     return (val === true) ? "yes" : "no";
 };

 render1 = () =>{ // return all the studentArr
    return (this.state.studentArr === 0) ? <p>No Students / Teachers Found!</p> :
    <ul><div><p>asdada</p></div>{this.state.studentArr.map(student => <li key={student.name}>Name: {student.name} ,Teacher: {this.converBool(student.is_teacher)} , NickName: {student.nick_name} , Age: {student.age}</li>)}</ul>
};

 render2 = () =>{
    let Teachers = this.state.studentArr.filter(t => t.is_teacher);
    return <ul><div><p>asdada</p></div>{Teachers.map(student => <li key={student.age}>Name: {student.name} ,Teacher: {this.converBool(student.is_teacher)} , NickName: {student.nick_name} , Age: {student.age}</li>)}</ul>
 };

 render3 = () =>{
    let Age = this.state.studentArr.filter(t => (t.age >= 50));
    return <ul><div><p>asdada</p></div>{Age.map(student => <li key={student.age}>Name: {student.name} ,Teacher: {this.converBool(student.is_teacher)} , NickName: {student.nick_name} , Age: {student.age}</li>)}</ul>
 };

 render4 = () =>{
    let NoneTeacherAge = this.state.studentArr.filter(t => (t.age < 30) && this.converBool(t.is_teacher));
    return <ul><div><p>asdada</p></div>{NoneTeacherAge.map(student => <li key={student.age} >Name: {student.name} ,Teacher: {this.converBool(student.is_teacher)} , NickName: {student.nick_name} , Age: {student.age}</li>)}</ul>
 };
 render() 
 {
    return <React.Fragment>
        <button onClick={this.render1}>
            Click To See All Teachers
        </button>
        <br></br>
        <button onClick={this.render2}>
            Click To See All Teachers
        </button>
        <br></br>
        <button onClick={this.render3}>
            Click To See All Age 50+
        </button>
        <br></br>
        <button onClick={this.render4}>
            Click To See All Student with Age below 30
        </button>

    </React.Fragment>;
 }

}

导出默认计数器；

当我运行程序显示按钮时，但当我按下它时，它不会调用任何功能，也不会显示任何内容！

Answer 1

您可以在组件状态下创建一个属性来管理所选选项 (1..4)，以及一个渲染函数：

class App extends Component {
  state = {
    selected: null,
    studentArr: [
      { name: "name1", is_teacher: true, nick_name: "SupremeShushan", age: 31 },
      { name: "name2", is_teacher: false, nick_name: "dd", age: 87 },
      { name: "name3", is_teacher: false, nick_name: "Bing", age: 44 },
      { name: "name4", is_teacher: false, nick_name: "Chains", age: 27 },
      { name: "name5", is_teacher: true, nick_name: "Jp", age: 58 },
      { name: "name6", is_teacher: false, nick_name: "Unix", age: 50 },
      { name: "name7", is_teacher: false, nick_name: "Grouch", age: 33 },
    ],
  };
  converBool(val) {
    // convert is_Teacher (boolean) and check if true or false and return value
    return val === true ? "yes" : "no";
  }

  render = () => {
    switch (this.state.selected) {
      case 1:
        return this.state.studentArr === 0 ? (
          <p>No Students / Teachers Found!</p>
        ) : (
          <ul>
            <div>
              <p>asdada</p>
            </div>
            {this.state.studentArr.map((student) => (
              <li key={student.name}>
                Name: {student.name} ,Teacher:{" "}
                {this.converBool(student.is_teacher)} , NickName:{" "}
                {student.nick_name} , Age: {student.age}
              </li>
            ))}
          </ul>
        );
    case 2: //... 
    }
  };
  
  render() {
    return (
      <React.Fragment>
        <button onClick={() => this.setState({ selected: 1 })}>
          Click To See All Teachers
        </button>
        <br></br>
        <button onClick={() => this.setState({ selected: 2 })}>
          Click To See All Teachers
        </button>
        <br></br>
        <button onClick={() => this.setState({ selected: 3 })}>
          Click To See All Age 50+
        </button>
        <br></br>
        <button onClick={() => this.setState({ selected: 4 })}>
          Click To See All Student with Age below 30
        </button>
        {render()}
      </React.Fragment>
    );
  }
}

响应按钮的 Onclick 事件

React Onclick events for button

events

onclick

button

rxjs

reactjs