リアクションコンポーネントonClickイベント

onClick -eventに新しいコンポーネントを作成することはできますか？reactjs 私はこの試みた：リアクションコンポーネントonClickイベント

... 
<li onClick={this.edit.bind(this)}><span className="glyphicon glyphicon-pencil"></span> Edit entry</li> 
...

これはeditメソッドされています：

edit(event) { 
     return <CreateFreightEntryModal key={"freightEditModal" + this.state.freight.ID} openOnStartup="true" modalId={"freightEditModal" + this.state.freight.ID} /> 
    }

んが、エラーがスローされないが、コンポーネントがされていませんクリックイベントが発生し

私のコンポーネントを作成した。私は何か間違っているか、これは本当に推奨されていませんか？

出典

2017-08-24 dns_nx

onlick関数は状態をまったく編集していないため、コンポーネントを返すだけです。 edit関数に 'edit '状態を切り替えると、' CreateFreightEntryModal'コンポーネントが通常どんなものでもなくレンダリングされます。 – Joe

返された要素がレンダリングされることを期待していますか？状態boolと編集ボタンのonclickを使用して 'setState'を使用し、それをtrueで更新し、その変数を使用してコンポーネントをレンダリングします。[Docの条件付きレンダリング部分]（https://facebook.github.io/react/docs）を確認してください。 /conditional-rendering.html） –

これが1要素の場合、フラグをstateに保持し、 '{flag？コンポーネント：null} 'レンダリング – Rajesh

反応では、モーダルを示すことは、その性質上、少しトリッキーです。

edit() { 
    this.setState({ showModal: true }) 
} 

render() { 

    return (
     <div> 
      { this.state.showModal && <CreateFreightEntryModal props/> } 
     </div> 
    ) 

}

出典

2017-08-24 11:09:21 Ozgur

ええ、私はこの解決策を既に知っていますが、私は600以上のエントリのリストを持っています。私は、このリストの各エントリを独自のコンポーネントとして作成したくありません。私の考えは、エントリがクリックされたときにコンポーネントを作成することでした。独自のコンポーネントをforeachエントリに作成しないように多くの読み込み時間を節約します。これは可能ですか？ –

今私はあなたの方法を理解しています。ご協力いただきありがとうございます。 –

@Ozgur GULはの回答で述べたようにあなたはより良い状態でコンポーネントをレンダリングすると思います。

ただし、何かを動的にレンダリングする必要がある場合は、このようにすることができます。

import ReactDOM from 'react-dom'; 

... 
edit() { 
    ReactDOM.render(<CreateFreightEntryModal key={"freightEditModal" + this.state.freight.ID} openOnStartup="true" modalId={"freightEditModal" + this.state.freight.ID} />); 
}

出典

2017-08-24 11:22:41 emil

リアクションコンポーネントonClickイベント

答えて

関連する問題