Question

是否可以调用多个handleClick或handleSelect？在我的组件中，我需要执行此操作，如果我只需要更改诸如handleSelect_2之类的名称，就不需要这样做。这是我的代码

handleClick() {
  let config = {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: `Bearer ${authentication.getToken()}`
    }
  };
  axios
    .post(
      `http://127.0.0.1:8000/api/sessions/${this.state.session_id}/students/${
        this.state.selectedStudent
      }`,
      {},
      config
    )
    .then(response => {
      this.props.history.push("/Sessions");
    })
    .catch(err => console.log(err));
}

handleSelect(event) {
  this.setState({ selectedStudent: event.target.value });
}

我只需要执行相同的方法，但是要使用其他发布方法。

感谢帮助。

Answer 1

尝试下面的代码。

class Test extends React.Component {
   onClick(event) {
      func1();
      func2();
   }
   render() {
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
}

Answer 2

您可以按如下方式重命名onClick处理程序，但使用不同的网址

handleStudentClick()
handleTeacherClick()
handleThemesClick()

最好将它们分开，因为随着应用程序的增长，它将使您易于维护。

对于您的选择（下拉列表），只需包含一个名称属性，该名称属性与该州的属性名称的值相同

<select name="selectedStudent" onChange={this.handleSelect}></select>
<select name="selectedTeacher" onChange={this.handleSelect} ></select>
<select name="selectedTheme" onChange={this.handleSelect} ></select>

然后，您可以将handleselect更改为

handleSelect(event) {
  let updateState = this.setState;
  updateState[event.target.name] = event.target.value
  this.setState(updateState );
}

同一组件Reactjs中有多个OnClick

2 个答案: