React(dispatch与参数传递)

只允许两种形式

 onClick={fn};

或

 onClick={()=>{fn()}}; //onClick={()=>{fn(id)}};

不能这么写

 onClick={fn(id)};

此外

 onClick={()=>{fn()}};

等效于

 onClick={fn};

第1种写法(由父组件dispatch,参数不流入TodoItem)

TodoList

  todos.map((item) => (          <TodoItem                 ......           onToggle={() => onToggleTodo(item.id)}           onRemove={() => onRemoveTodo(item.id)}         />         )) ...... const mapDispatchToProps = (dispatch) => {   return {     onToggleTodo: (id) => {       dispatch(toggleTodo(id));     },     onRemoveTodo: (id) => {       dispatch(removeTodo(id));     }   }; };

TodoItem

 <input ... onClick={() => {onToggle()}} />  <button ... onClick={()=>{onRemove()}}>×</button> //这么写很蠢

或

 <input ... onClick={onToggle} />  <button ... onClick={onRemove}>×</button>

或

 <input ... onClick={onToggle} />  <button ... onClick={onRemove}>×</button> ...... const mapDispatchToProps = (dispatch,ownProps) => {   return {    onToggle:()=>{     ownProps.onToggle();   },    onRemove:()=>{     ownProps.onRemove();   }    }; };

第2种写法(由父组件dispatch,参数流入TodoItem)
TodoList

  todos.map((item) => (          <TodoItem           ......           id={item.id}           onToggle={onToggleTodo}           onRemove={onRemoveTodo}         />         )) ...... const mapDispatchToProps = (dispatch) => {   return {     onToggleTodo: (id) => {       dispatch(toggleTodo(id));     },     onRemoveTodo: (id) => {       dispatch(removeTodo(id));     }   }; };

TodoItem

 <input ... onClick={() => {onToggle(id)}} />  <button ... onClick={()=>{onRemove(id)}}>×</button>

或

 <input ... onClick={onToggle} />  <button ... onClick={onRemove}>×</button> ......... const mapDispatchToProps = (dispatch,ownProps) => {   return {    onToggle:()=>{     ownProps.onToggle(ownProps.id);   },    onRemove:()=>{     ownProps.onRemove(ownProps.id);   }    }; };

第3种写法(由子组件dispatch,参数不流入TodoItem)

 这是不可能的

第4种写法(由子组件dispatch,参数流入TodoItem)
TodoList

TodoItem

 <input ... onClick={onToggle} />  <button ... onClick={onRemove}>×</button> ...... const mapDispatchToProps = (dispatch,ownProps) => {   return {     onToggle: () => {       dispatch(toggleTodo(ownProps.id));     },     onRemove: () => {       dispatch(removeTodo(ownProps.id));     }   }; };

作者：余生筑
链接：https://www.jianshu.com/p/e596191ae7bc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

文章来源: https://blog.csdn.net/hsany330/article/details/90701192

标签

react

onclick