Javascript 如何调用两个函数onClick（）react/redux

我有一个

组件

，看起来像这样

class Test extends React.Component {
   onClick() {
       alert("I am a Component")
   }

   render() { 
      const { fromContainer } = this.props
      return (
         <a href="#" onClick={ this.onClick }>Test Link</a>
      );
   }
} 

就这样。但它不适用于在不同“位置”定义的两个函数。

类测试扩展了React.Component{
构造函数（）{
超级（）
this.test=this.test.bind（this）
}
测试（）{
this.props.fromContainer（）；
//在这里调用其他函数
}
render（）{
const{fromContainer}=this.props
返回(
);
}
}

请尝试此

类测试扩展React.Component{
构造函数（）{
超级（）
this.test=this.test.bind（this）
}
测试（）{
this.props.fromContainer（）；
//在这里调用其他函数
}
render（）{
const{fromContainer}=this.props
返回(
);
}
}

---

请尝试此

您可以将本地到组件onClick和从容器onClick包装到单个函数中

类测试扩展了React.Component{
localOnClick（）{
警报（“本地点击”）；
}
onClick（）{
const{fromContainer}=this.props；
localOnClick（）；
fromContainer（）；
}
render（）{
返回(
);
}
}

您可以将本地到组件onClick和从容器onClick包装到单个函数中

类测试扩展了React.Component{
localOnClick（）{
警报（“本地点击”）；
}
onClick（）{
const{fromContainer}=this.props；
localOnClick（）；
fromContainer（）；
}
render（）{
返回(
);
}
}

这是未测试的代码。我只是一时兴起才编造出来的。如果我没弄错的话，我想您只需要使用您包装

组件的
容器，而不是
组件本身（在本例中，您的
测试
组件），如下所示：

//action.js====================
const fromContainer=（）=>（分派）=>{
分派（{type:'DO_SOMETHING'}）
}
从容器导出默认值；
//reducer.js===============================
导出默认值（状态=[]，操作=>{
开关（动作类型）{
“做点什么”案例：
返回{…状态，{newField:'newValue'}}；
默认：返回状态；
}
}
//Container.js==============================
从'react redux'导入{connect}；
const mapStateToProps=state=>state.reducer；
导出默认容器=连接（mapStateToProps，{fromContainer}）（组件）；
//组成部分===============================
类组件扩展了React.Component{
onClick（）{
this.props.fromContainer（）；
}
render（）{
返回(
);
}
}
//在您的路线中（例如react router v3.0.2）==============
从'react redux'导入{Provider}；
从“./store”导入存储；//假设您的存储在同一目录中
从“./Container”导入容器；//您需要使用容器，而不是使用组件。
ReactDOM.render(
,
document.getElementById（'容器'）
)

希望这有点帮助。^^
 这是未测试的代码。我只是一时兴起才编造出来的。如果我没弄错的话，我想您只需要使用您包装
组件的
容器，而不是
组件本身（在本例中，您的
测试
组件），如下所示：

//action.js====================
const fromContainer=（）=>（分派）=>{
分派（{type:'DO_SOMETHING'}）
}
从容器导出默认值；
//reducer.js===============================
导出默认值（状态=[]，操作=>{
开关（动作类型）{
“做点什么”案例：
返回{…状态，{newField:'newValue'}}；
默认：返回状态；
}
}
//Container.js==============================
从'react redux'导入{connect}；
const mapStateToProps=state=>state.reducer；
导出默认容器=连接（mapStateToProps，{fromContainer}）（组件）；
//组成部分===============================
类组件扩展了React.Component{
onClick（）{
this.props.fromContainer（）；
}
render（）{
返回(
);
}
}
//在您的路线中（例如react router v3.0.2）==============
从'react redux'导入{Provider}；
从“./store”导入存储；//假设您的存储在同一目录中
从“./Container”导入容器；//您需要使用容器，而不是使用组件。
ReactDOM.render(
,
document.getElementById（'容器'）
)

希望这有点帮助。^^
 现在用edit please再次检查，我在onclickCheck上为
this
添加了一个绑定现在用edit please再次检查，我在onclickconstructor上为
this
添加了一个绑定（）{super（）this.test=this.test.bind（this）}请绑定构造函数中的函数名或测试它。这里的更多信息：（刚刚被指向它）你也可以使用箭头函数，imho，它更好并且保持上下文correctly@Icepickle如何在这里使用箭头函数？@Stophface只需从构造函数中删除绑定并使用
this.test（）}>
constructor（）{super（）this.test=this.test.bind（this）}请在构造函数中绑定函数名并对其进行测试。这里的更多信息：（刚刚被指向它）你也可以使用箭头函数，imho，它更好并且保持上下文correctly@Icepickle我如何在这里使用箭头函数？@Stophface只需从构造函数中删除绑定并使用
this.test（）}>
您确实知道，在您的第一个版本中，单击
这个。会丢失它吗？在这里使用箭头函数有很大的潜在好处，比如
（）=>this.onClick（）
您知道在第一个版本中
this.onClick
会丢失它吗？有
class Test extends React.Component {
   render() { 
      const { fromContainer } = this.props
      return (
         <a href="#" onClick={ fromContainer }>Test Link</a>
      );
   }
} 

 class Test extends React.Component {
   constructor() {
     super()
     this.test = this.test.bind(this)
   }

   test() {
     this.props.fromContainer();
     //call other function here
   }

   render() {
     const { fromContainer } = this.props
     return (
         <a href = "#" onClick = { this.test }> Test Link </a>
     );
   }
 }

// action.js ====================
const fromContainer = () => (dispatch) => {
    dispatch({ type: 'DO_SOMETHING' })
}

export default fromContainer;

// reducer.js ===============================
export default (state=[], action) => {
    switch(action.type) {
    case 'DO_SOMETHING':
        return {...state, { newField: 'newValue' } };
    default: return state;
  }
}

// Container.js ==============================
import { connect } from 'react-redux';

const mapStateToProps = state => state.reducer;

export default Container = connect(mapStateToProps, { fromContainer })(Component);

// Component ===============================
class Component extends React.Component {
   onClick() {
       this.props.fromContainer();
   }

   render() { 
      return (
         <a href="#" onClick={ this.onClick.bind(this) }>Test Link</a>
      );
   }
}

// and in your routes (just for example react-router v3.0.2) ==============
import { Provider } from 'react-redux';
import store from './store'; // assuming your store is on the same directory

import Container from './Container'; // instead of using the Component, you need to use Container instead.

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={Container}></Route>
    </Router>
  </Provider>,
  document.getElementById('container')
)