Как получить доступ к строке, если ячейка нажата в React / Redux
У меня есть таблица, которая выглядит вот так.
Когда я нажимаю кнопку изменения, я хочу изменить 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);
Ответы 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";
В этом случае вы можете обновить локальное состояние компонентов вместо этого, используя this.setState и иметь какой-то массив или объект, который отслеживает, что изменилось, а затем отражает это в вашем методе рендеринга.
не изменит ли это содержание места? Мне нужно только на время изменить содержимое ячейки