Как получить доступ к строке, если ячейка нажата в 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

Все, что вам нужно сделать, это изменить структуру данных основы для ваших строк на основе идентификатора элемента, по которому был выполнен щелчок, аналогично тому, как вы пытаетесь удалить элемент.

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";