如果在React / Redux中单击单元格，如何访问行

Question

我有这样的桌子。

当我单击更改按钮时，我想将行中第二个单元格的innerHTML更改为<input>{this.props.keywords}</input>，并将图标更改更改为另一个（我认为这基本上是相同的问题）。什么是访问此单元格内容的正确方法？

class Contenttr extends Component {
  deleteItem() {
    this.props.onDeleteItem(this.props.id);
  }
  changeItem() {

  }
  render() {
    return (
      <tr>
        <td className="text-center"><img src="http://via.placeholder.com/100x50" alt="Logo" /></td>
        <td className="text-center">{this.props.keywords}</td>
        <td className="text-center">{this.props.place}</td>
        <td className="text-center"><Button color="danger" size="sm" onClick={this.deleteItem.bind(this)}>Delete</Button></td>
        <td className="text-center"><Button color="primary" size="sm" onClick={this.changeItem.bind(this)}>Change</Button></td>
      </tr>
    );
  }
}

export default connect(
  state => ({
    trStore: state
  }),
  dispatch => ({
    onDeleteItem: (id) => {
      dispatch({type:"DELETE_ITEM", id: id})
    }
  })
)(Contenttr);

Answer 1

您要做的就是根据被单击的项目的ID更改行的支持数据结构，类似于您尝试删除项目的方式。

changeItem() {
  this.props.onChangeItem(this.props.id);
}

然后在化简器中，如果将这些表行的后备数组称为items，则可以执行以下操作将该项目的place更改为"foo"

const itemToChangeIndex = items.findIndex(item => item.id === action.id);
return items.slice()[itemToChangeIndex].place = "foo";