赵走x博客 - 开发者的网上家园

41、构建实例应用：组件：Actions

资源编号:76094 书籍 React快速上手开发热度：81

接下来需要关注表格中的行。表格的每一行都应该可以进行一些操作（如图6-8 所示），包括：删除、编辑与查看（当信息没有在行内显示完全时，点击该按钮显示完整内容）。

![bs64](https://img.handsomemark.com/2019/11/18/61e89f8e-09b0-11ea-8e31-0242ac140002.png)
图6-8：操作
以下是Actions 组件在发现工具中的测试用例：

```
<h2>Actions</h2>
        <div>
            <Actions onAction={type=>alert(type)} />
        </div>
```

其具体实现也相当容易：
```
import React from 'react'
// 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。
import PropTypes from 'prop-types'

const Actions=props=>
    <div className="Actions">
        <span tabIndex="0" className="ActionsInfo" title="More info"
              onClick={props.onAction.bind(null,'info')}>ℹ</span>
        <span tabIndex="0" className="ActionsEdit" title="Edit"
                onClick={props.onAction.bind(null,'edit')}>✐</span>
        <span tabIndex="0" className="ActionsDelete" title="Delete"
              onClick={props.onAction.bind(null,'delete')}>x</span>
    </div>;
    
Actions.propTypes={
    onAction:PropTypes.func
};

Actions.defaultProps={
    onAction:()=>{}
};
export default Actions;
```
Actions 是一个简单的组件，只需实现render() 方法且不需要维护状态。因此可以通过箭头函数将其定义为无状态函数式组件。此外，我们还使用了最简洁的语法：没有return，没有{}，没有function 语句。（在使用旧语法的日子里，我们大概很难辨认出这是一个函数吧！）

该组件的调用者可以通过onAction 属性注册回调函数，以监听动作的发生。这种模式也相当简单，作用是让子组件通知父组件有变化发生。如你所见，添加自定义事件（比如onAction、onAlienAttack 等）就是如此轻松。