反応コンポーネントでonClickイベントを渡すことができませんか？

Question

私はこのコードでは、リレーと私のコンポーネントを変異しようとしていますが、私は

handleSubmit = (e) => { 
    e.preventDefault(); 
    Relay.Store.commitUpdate(
     new createTodoMutation({ 
     text: this.refs.textForNewTodo.value, 
     store: this.props.store 
     }) 
    ); 
    this.refs.textForNewTodo.value=""; 
    } 
    handleOnClick = (id) => { 
    id.preventDefault(); 
    Relay.Store.commitUpdate(
     new toggleTodoStatus({ 
     id: id, 
     store: this.props.store 
     }) 
    ); 
    } 
    render() { 
    let todolist = this.props.store.todoConnection.edges.map((edge) => { 
     return (
     <li key={edge.node.id} onClick={this.handleOnClick(edge.node.id)}> 
      <p>{edge.node.text}</p> 
     </li> 
    ); 
    }); 
    return (
     <div> 
     <h3>Todos</h3> 
     <form onSubmit={this.handleSubmit} > 
      <input type="text" placeholder="Todo text" ref="textForNewTodo" /> 
      <button type="submit">Add</button> 
     </form> 
     Showing: &nbsp; 
     <select onChange={this.setLimit} defaultValue={this.props.relay.variables.limit}> 
      <option value="5">5</option> 
      <option value="10">10</option> 
     </select> 
     <ul> 
      {todolist} 
     </ul> 
     </div> 
    ); 

handleSubmitがhandleOnClickリストに取り組んでいるが、リストにonClickイベントを置くことができない理由を私は知らないではないと私ですこのエラーが発生しました。 "Uncaught TypeError：未定義の 'id'プロパティを読み取ることができませんでしたが、onClick = {this.handleOnClick（edge.node.id）}で呼び出されたときにedge.node.idを渡しています。私はこのコードで何が間違っているのか分かりません。助けて？

Answer 1

これは、onClickイベントを渡す間違った方法です。 onClick={this.handleOnClick(edge.node.id)}を実行すると、イベントはレンダリング中に一度だけ呼び出されます。

try onClick={() => this.handleOnClick(edge.node.id)}あなたのケースでは

Answer 2

、あなたはその要素をクリックするたびので、それはそれを呼び出すことができます代わりにのonClickにそれを渡すので、それぞれがレンダリング直後handleOnClickを呼んでいます。

あなたの関数にパラメータを渡す必要があるので、あなたは、単にこの問題を解決するためのonClick

ので

<... onClick={this.handleOnClick} /> 

に関数を渡すことはできません、あなたは矢印関数を作成することができますし、onClickの

に矢印関数を渡します

<... onClick={() => this.handleOnClick(edge.node.id)} /> 

id.preventDefault（）も必要ありません。もう一度