如何调用两个函数 onClick() react/redux答案

【问题标题】：How to call two functions onClick() react/redux如何调用两个函数 onClick() react/redux
【发布时间】：2017-11-18 22:25:45
【问题描述】：

我有一个看起来像这样的component

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>
      );
   }
}

在我的container 中，我将Test 连接到Store。我需要在onClick 上调用两个函数。 component本身定义的一个函数（onClick()和alert()，另一个是函数fromContainer，它是一个action，通过reducer等。

如何让组件知道函数fromContainer。当只调用一个函数时：

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

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

【问题讨论】：

你知道this.onClick 在你的第一个版本中会失去它的上下文不是吗？在这里使用箭头函数有很大的潜在好处，比如() => this.onClick()

标签： javascript reactjs redux

【解决方案1】：

 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>
     );
   }
 }

请试试这个

【讨论】：

构造函数 () { super() 这个。测试=这个。 test.bind(this) } 请在构造函数中绑定函数名
就是这样。更多信息在这里：facebook.github.io/react/docs/handling-events.html（刚刚指向它）
你也可以使用箭头函数，恕我直言，它更好并且保持上下文正确
@Icepickle 我如何在这里使用箭头函数？
@Stophface 只需从构造函数中删除绑定并使用<a href="#" onClick={()=>this.test()}>

【解决方案2】：

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

class Test extends React.Component {
    localOnClick() {
       alert('local on click');
    }
    
    onClick() {
      const { fromContainer } = this.props;
      localOnClick();
      fromContainer();
    }
    
    render() { 
       return (
          <a href="#" onClick={ this.onClick.bind(this) }>Test Link</a>
       );
    }
}

【讨论】：

现在请再次检查编辑，我在 onclick 上添加了对this 的绑定

【解决方案3】：

这是未经测试的代码。我只是一时兴起才编出来的。如果我猜对了，我想你只需要使用 Container 包裹你的 Component 而不是 Component 本身（在这种情况下是你的 Test 组件），如下所示：

// 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')
)

希望这会有所帮助，哪怕只是一点点。 ^^,

【讨论】：