React中点击按钮时获取组件name字段值的实现方法

没问题，我来帮你实现点击按钮获取name字段值的需求！咱们只需要对现有组件做两处小修改：

1. 添加触发点击的按钮 #

首先要在render方法的返回内容里加上一个按钮，绑定点击事件到handleBuy方法，这样点击时才能触发我们的逻辑：

2. 在handleBuy方法中获取name值 #

直接通过this.props.movie.name就能拿到你需要的name字段值，之后可以打印、存入数组或者做其他业务处理。

修改后的完整组件代码 #

var Movie = React.createClass({
  handleBuy: function(){
    // 获取name字段的值
    const movieName = this.props.movie.name;
    console.log('获取到的电影名称：', movieName);
    
    // 这里可以用拿到的name替换原来的硬编码标题
    cartItems.push({ id: 2, title: movieName, visible: false });
    console.log('已添加到购物车的项目：', cartItems);
  },
  render: function() {
    return (
      <tr>
        <td>{this.props.movie.name}</td>
        <td>{this.props.movie.day}</td>
        <td>{this.props.movie.description}</td>
        {/* 新增点击按钮 */}
        <td><button onClick={this.handleBuy}>加入购物车</button></td>
      </tr>
    );
  }
});

补充说明 #

你的组件通过props接收父组件传递的movie对象，所以在组件的任何方法（比如这里的handleBuy）中，都可以通过this.props.movie访问该对象的所有属性。这样点击按钮时，就能精准拿到name字段的值啦。

内容的提问来源于stack exchange，提问作者Geek