Question

我有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 1}}等。

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

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

就是这样。但它不适用于两个功能，这两个功能在不同的地方定义＆＃34;。

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

请试试这个

Answer 2

您可以将本地到组件onClick和from-container onClick包装到单个函数中。

＆＃13;

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

＆＃13;

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

希望这有助于甚至一点点。 ^^，

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

3 个答案: