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

IT技术 javascript reactjs redux
2021-05-06 04:50:34

我有一个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我连接TestStore. 我需要在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>
      );
   }
} 

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

3个回答
 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>
     );
   }
 }

请试试这个

这是代码未经测试。我只是一时兴起。如果我猜对了,我认为你只需要使用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 和来自容器的 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>
       );
    }
}