handle内のコンポーネントを更新しました。React

Question

コンポーネントの状態の更新/変更に問題があります。ここで私は仕事を作るしようとしているコードは次のとおりです。coditionalレンダリングで

class NavbarList extends React.Component { 
 
constructor() { 
 
    super(); 
 
    this.onClick = this.handleClick.bind(this); 
 
    } 
 

 
    handleClick(event) { 
 
    const {id} = event.target; 
 
    console.log(id); 
 

 
\t return <h3 id={1} onClick={this.onClick}>New Text</h3> 
 
    } 
 
\t render() { 
 
\t \t return (\t 
 
\t \t <h3 id={0} onClick={this.onClick}>Old Text</h3> 
 
\t)}; 
 
}; 
 

 
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>

例は私のためにそれをクリアされませんでした。

私はもっとexmaplesが必要です。

Answer 1

新しいJSX要素を返す代わりに、状態を使用してIDとテキストを保存し、クリック時に状態を更新することができます。

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 (\t 
 
     <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>