Javascript 在React中未定义Jquery onClick函数

我对react还不熟悉，我正在尝试使用jquery动态地将li添加到ul中。 在我的li中，我有一个带有onclick方法的sapn。当我单击span时，我希望触发特定方法，但我得到-未捕获引用错误：在HTMLSpanElement.onclick中未定义deleteMsg。我一直在寻找解决办法，但一无所获。我不明白是什么问题

这是我的代码：

    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;

类引导页扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
这个州={
瓦尔：[]
}
}
扶手（味精）{
this.state.val.push（msg）；
this.setState（{val:[]}）；
}
//从数据库中获取所有数据并放入列表中
组件willmount（）{
取（'http://localhost:3003/api/msgs/')
.然后（功能（res）{
返回res.json（）；
}).then（功能（数据）{
var-msgs=[数据]；
msgs[0]。映射（函数（msg）{
console.log（msg.msgdata）；
//在这里，我使用名为“deleteMsg”的sapn和onclick方法添加li
$（“#coach面板内容”）。附加（
（`li class=myli>${msg.msgdata}X
`）；
})
})
.catch（函数（错误）{
console.log（错误）
}); 
}
deleteMsg（项目）{
返回获取（'http://localhost:3003/api/msgs/“+项目{
方法：“删除”
})。然后（响应=>
response.json（）.then（json=>{
返回json；
})
);
}
render（）{
返回(
教练页


);
}
}
导出默认引导页面；

更新：

我做了@sandor vasas所说的所有更改，直到现在我才注意到，但是当我尝试添加新消息时，我得到了一个错误：“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;

类引导页扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
这个州={
瓦尔：[]
}
}
扶手（味精）{
this.state.val.push（msg）；
this.setState（{val}）；
}
//从数据库中获取所有数据并放入列表中
componentDidMount（）{
取（'http://localhost:3003/api/msgs/')
.then（res=>res.json（））
.then（data=>this.setState（{val:data}））
.catch（console.error）；
}
deleteMsg（项目）{
返回获取（'http://localhost:3003/api/msgs/“+项目{
方法：“删除”
})。然后（响应=>
response.json（）
。然后（json=>{
返回json；
})
);
}
render（）{
返回(
教练页

{ 
this.state.val.map（（消息，索引）=>

{msg.msgdata}
this.deleteMsg（msg.\u id）}>X


)
}

);
}
}
导出默认引导页面；

我是否可以建议在这个用例中避免使用jQuery

React作为视图库非常适合使用状态更改这样简单的方法来处理传入数据的显示。下面是一些让您开始使用的伪代码：

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

类引导页扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
}
componentDidMount（）{
获取您的数据。然后（数据=>{
this.setState（{data:data}）；
});
}
listItems（）{
返回此.state.data.map（msg=>{
返回(

{msg.msgdata}
（删除msg（msg.\u id）}>X


);
});
}
render（）{
返回(
//你的其他代码

{this.state.data.length？this.listItems（）：null}

);
}
}

---

数据获取成功后，我们调用

setState

——这将导致组件重新呈现，新数据将触发列表项的注入

您不需要jQuery来执行此操作。实际上，您应该只使用React状态

首先，你的

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

应该是

handleSend(msg){
    this.state.val.push(msg);
    this.setState({ val : this.state.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 ); 
}

在渲染中，输出状态的val数组：

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

render（）{
返回(
教练页

{ 
this.state.val.map（msg=>

{msg.msgdata}
this.deleteMsg（msg.\u id）}>X

)
}

);
}