Question

如何删除onClick上的记录（如何识别单击的项目/模型并从状态中删除数据）。我是否需要使用React.createClass创建的nameRecord，或者仅仅使用一个函数（如果我使用createClass / just函数，reactjs会不同地跟踪每条记录）。

var nameRecord = React.createClass({
    handleClick: function(e){
        alert('my name is'+this.props.data.name);
        this.destroy() // can I remove the record
    },
    render: function(){
        return <ol onClick={this.handleClick}>{this.props.data.name}</ol>
    }    
});
var people = [{"name":"king"},{"name":"Larry"}]
var NameList = React.createClass({
  getInitialState: function(){
    return { 
        data: people,
    };
  },
  render:function(){

    people = this.state.data.slice(0,5)
    return <ul>    
        List of Names - 
        {people.map(function(person){
            return <nameRecord data={person}>child</nameRecord>
        })}

      </ul>
      ;
  }

})
React.renderComponent(
  <NameList />,
  document.getElementById('content')
  )

Answer 1

React组件不会破坏自己。您将事件传播到所有者组件，或者更确切地说传播到包含数据的组件，例如作为国家。然后你修改数据并重新渲染组件。

例如：

var nameRecord = React.createClass({
    handleClick: function(e){
      // propagate event
      if (this.props.onDelete) {
        this.props.onDelete(this.props.data);
      }
    },
    render: function(){
      return <ol onClick={this.handleClick}>{this.props.data.name}</ol>
    }    
});

var people = [{"name":"king"},{"name":"Larry"}];

var NameList = React.createClass({
  getInitialState: function(){
    return { 
        data: people,
    };
  },
  onDelete: function(index) {
    // remove element and update state, which causes a rerender
    var data = this.state.data.slice()
       .splice(this.data.indexOf(person), 1);
    this.setState({data: data});
  },
  render: function(){

    var names = this.state.data.map(function(person){
      return (
        <nameRecord data={person} onDelete={this.onDelete} />
      );
    }.bind(this))

    return (
      <div>
        List of Names - 
        <ul>{names}</ul> 
      </div>
    );
  }

});

reactjs-如何识别订单项

1 个答案: