Question

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

＆＃13;

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')
);

＆＃13;

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

＆＃13;

有关编码渲染的例子并没有为我清除它。

我需要更多的exmaples。

Answer 1

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

＆＃13;

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')
);

＆＃13;

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

＆＃13;

更新handleClick React中的组件

1 个答案: