Question

我是新手做出反应，我试图使用jquery动态地将li添加到ul。在我的内心，我有一个onclick方法的sapn。当我点击跨度时，我希望触发特定方法，但我得到 - 未捕获的ReferenceError：在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;

更新

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

应该是

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

在React中未定义Jquery onClick函数

2 个答案: