JqueryのonClick関数は、リアクションでは定義されていません。

Question

私は反応して、liをulに動的に追加しようとしています。 私の李の中に私はonclickメソッドでsapnを持っています。スパンをクリックすると特定のメソッドを起動したいが、取得する - 未知のReferenceError：deleteMsgはHTMLSpanElement.onclickで定義されていない。私は解決策を探したが、何も働かなかった。私はこれが私のコードです...問題が何であるかを

を理解していない：

class CoachPage extends React.Component { 

     constructor(props, context) { 
     super(props, context); 

     this.state={ 
      val: [] 
     } 
     } 

     handleSend(msg){ 

     this.state.val.push(msg); 
     this.setState({val: []}); 
    } 

    // get all data from db and put in the list 
    componentWillMount(){ 
     fetch('http://localhost:3003/api/msgs/') 
     .then(function(res) { 
      return res.json(); 
      }).then(function(data){ 
      var msgs = [data]; 
      msgs[0].map(function(msg){ 
       console.log(msg.msgdata); 

//Here i add the li's with a sapn and onclick method called "deleteMsg" 
       $('#coach-panel-content').append( 
        (`<li class=myli>${msg.msgdata}<span onclick=deleteMsg('${msg._id}')>X</span></li><hr>`)); 
      }) 
      }) 
     .catch(function(error) { 
      console.log(error) 
     }); 
    } 

    deleteMsg(item){ 
     return fetch('http://localhost:3003/api/msgs/' + item, { 
      method: 'delete' 
     }).then(response => 
      response.json().then(json => { 
      return json; 
      }) 
     ); 

     } 

     render() { 
     return (
      <div className="container" style={{color: '#FFF', textAlign: 'right'}}> 
      <h1>Coach Page</h1> 
      <AddMsg onSend={this.handleSend.bind(this)} /> 
      <Panel header="עדכונים" bsStyle="info" style={{float: 'left', textAlign: 'right', width: '40em'}}> 
       <ul id="coach-panel-content"> 


       </ul> 
      </Panel> 
      </div> 
     ); 
     } 
    } 

    export default CoachPage; 

UPDATE：

私はすべての変更を行っ@sandor VASASは言った、私はしませんでした今まで気づいていましたが、新しいmsgを追加しようとすると、このエラーが発生します： "Uncaught ReferenceError：valが定義されていません"。私は、これは私の更新されたコードである ...それが起こるのである理由私は理解していない：

class CoachPage extends React.Component { 

    constructor(props, context) { 
    super(props, context); 

    this.state={ 
     val: [] 
    } 
    } 

    handleSend(msg){ 
    this.state.val.push(msg); 
    this.setState({val}); 
} 


// get all data from db and put in the list 
componentDidMount(){ 
    fetch('http://localhost:3003/api/msgs/') 
    .then(res => res.json()) 
    .then(data => this.setState({ val: data })) 
    .catch(console.error); 
} 

deleteMsg(item){ 
    return fetch('http://localhost:3003/api/msgs/' + item, { 
     method: 'DELETE' 
    }).then(response => 
     response.json() 
     .then(json => { 
     return json; 

     }) 
    ); 

    } 

    render() { 
    return (
     <div className="container" style={{color: '#FFF', textAlign: 'right'}}> 
     <h1>Coach Page</h1> 
     <AddMsg onSend={this.handleSend.bind(this)}/> 
     <Panel header="עדכונים" bsStyle="info" style={{float: 'left', textAlign: 'right', width: '40em'}}> 
     <ul id="coach-panel-content"> 
     { 
      this.state.val.map((msg, index) => 
      <li key={index} className='myli'> 
       {msg.msgdata} 
       <span onClick={() => this.deleteMsg(msg._id)}>X</span> 
       <hr/> 
      </li> 
     ) 
     } 
     </ul> 
     </Panel> 
     </div> 
    ); 
    } 
} 

export default CoachPage; 

Answer 1

私はこのユースケースのためのjQueryを避けてお勧めかもしれませんか？

ビューライブラリとしての反応は、状態変化などの単純なものを使用して、着信データの表示を処理するのに十分適しています。ここでは、始めるためにいくつかの擬似コードは次のとおりです。

class CoachPage extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: [] }; 
    } 

    componentDidMount() { 
    fetchYourData.then(data => { 
     this.setState({ data: data }); 
    }); 
    } 

    listItems() { 
    return this.state.data.map(msg => { 
     return (
     <li class="someClass"> 
      {msg.msgdata} 
      <span onClick={() => (deleteMsg(msg._id)})>X</span> 
      <hr /> 
     </li> 
    ); 
    }); 
    } 

    render() { 
    return (
     // your other code 
     <ul id="coach-panel-content"> 
     {this.state.data.length ? this.listItems() : null} 
     </ul> 
    ); 
    } 
} 

あなたのデータの成功時にフェッチ、我々はsetStateを呼び出す - これはリスト項目

の注入をトリガーする新しいデータを使用してコンポーネントの再描画が発生します

Answer 2

これを行うためにjQueryは必要ありません。実際には、React状態のみを使用してください。あなたは、それによって、すべてを消去し、配列に要素をプッシュするが、空の配列で状態を更新した

handleSend(msg){ 
    this.state.val.push(msg); 
    this.setState({ val : this.state.val }); 
} 

まず、あなたの

handleSend(msg){ 
    this.state.val.push(msg); 
    this.setState({val: []}); 
} 

でなければなりません。 setState({ val: val })またはsetState({ val })（略称）を呼び出して、同じ配列参照とトリガーの再レンダリングで状態を更新してください。

APIが配列を返すと仮定すると、jQueryを必要とせずに直接配列を更新することも、別の配列を作成することもできます。

componentWillMount(){ 
    fetch('http://localhost:3003/api/msgs/') 
     .then(res => res.json()) 
     .then(data => this.setState({ val: data })) 
     .catch(console.error); 
} 

でレンダリングし、あなたの出力状態のヴァル配列：

render() { 
    return (
     <div className="container" style={{color: '#FFF', textAlign: 'right'}}> 
     <h1>Coach Page</h1> 
     <AddMsg onSend={this.handleSend.bind(this)} /> 
     <Panel header="עדכונים" bsStyle="info" style={{float: 'left', textAlign: 'right', width: '40em'}}> 
      <ul id="coach-panel-content"> 
      { 
      this.state.val.map(msg => 
       <li class='myli'> 
       {msg.msgdata} 
       <span onClick={() => this.deleteMsg(msg._id)}>X</span> 
       </li> 
      ) 
      } 
      </ul> 
     </Panel> 
     </div> 
    ); 
    }