在句柄中更新组件单击反应

Question

我在更新/更改组件状态时遇到问题。这是我正在尝试工作的代码：

class NavbarList extends React.Component {
constructor() {
super();
this.onClick = this.handleClick.bind(this);
}
handleClick(event) {
const {id} = event.target;
console.log(id);
	return <h3 id={1} onClick={this.onClick}>New Text</h3>
}
	render() {
		return (	
		 <h3 id={0} onClick={this.onClick}>Old Text</h3>
	)};
};
ReactDOM.render(
<NavbarList  />,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

带有编纂渲染的示例并没有为我清除它。

我需要更多的例子。

Answer 1

您可以使用状态来保存 id 和文本，然后在单击时更新状态，而不是返回新的 JSX 元素。

class NavbarList extends React.Component {
constructor() {
super();
this.state = {
text: "Old Text",
id: 0
};
this.onClick = this.handleClick.bind(this);
}
handleClick(event) {
const {id} = event.target;
console.log(id);
this.setState({
text: "New text",
id: 1
});
}
render() {
return (	
<h3 id={this.state.id} onClick={this.onClick}>{this.state.text}</h3>
)};
};
ReactDOM.render(
<NavbarList  />,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>