Jquery onClick 函数在 React 中未定义

Question

我是新手，我正在尝试使用 jquery 动态地将 li 添加到 ul。 在我的 li 里面，我有一个带有 onclick 方法的 sapn。当我单击跨度时，我希望触发特定方法，但我得到 - Uncaught ReferenceError: deleteMsg is not defined at 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;

更新：

我进行了@sandor vasas 所说的所有更改，直到现在我才注意到，但是当我尝试添加新的 msg 时，我收到了这个错误：“Uncaught ReferenceError: val is not defined”。我不确定我明白为什么会发生这种情况.. 这是我更新的代码：

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 吗？

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

在您的数据获取成功后，我们会调用 setState - 这将导致使用新数据重新渲染您的组件，从而触发列表项的注入

Answer 2

您不需要 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>
    );
  }