Question

我正在使用React做我的第一个项目，有一件事我想不通。所以我有许多不同的Type组件被设置为主要组件的TypesPage状态。当onChange事件发生在Type组件上时，我想知道它处于TypesPage状态的类型或类型数组中的索引，所以我可以重新更新我的data 1}}状态。

在handleChange函数内部，我使用了jQuery的grep函数，将点击的Type标题值与所有类型数组进行比较，但我确信这不是正确的方法，并且它将是一个过度杀手巨大的阵列。

为什么我想知道哪个

handleChange:function(element, event){
  var typeIndex;
  $.grep(types, function(e, index){
    if(element.title === e.title){
      typeIndex = index
    }
  });
  types[typeIndex] //Now I know that this is the Type that was changed
}

Fiddle

var types = [
  {
    type_id: 1,
    type_name: "Logo"
  },
  {
    type_id: 2,
    type_name: "Ad"
  },
  {
    type_id: 3,
    type_name: "Catalog"
  },
];

var Type = React.createClass({
  render: function() {
    return( 
        <li>
        <input type="text" value={this.props.title}
            onChange={this.props.handleChange.bind(null, this.props)} />
      </li>
    );
  }
});
var TypesContainer = React.createClass({
  render: function() {
    var that = this;
      return(
        <ul>
            {this.props.data.map(function(entry){
            return(
                <Type
                key={entry.type_id}
                title={entry.type_name}
                handleChange={that.props.handleChange}
              />
            );
          })}
        </ul>
      );       
  }
});
var TypesPage = React.createClass({
  getInitialState: function(){
    return({data: types})
  },
  handleChange: function(element, event){

  },
  render: function() {
    return(
        <TypesContainer
            data={this.state.data}
        handleChange={this.handleChange}
      />
    );
  }
});

ReactDOM.render(
  <TypesPage />,
  document.getElementById('container')
);

Answer 1

我更喜欢ES6。问题是，您必须bind handleChange您的this事件，其正确的上下文为class Example extends React.Component { constructor(){ super(); this.state = { data: [{id: 1, type: 'Hello'},{id: 2, type: 'World'},{id: 3, type: 'it"s me'}], focusOn: null }; } change(index,e){ const oldData = this.state.data; oldData[index].type = e.target.value; this.setState({data:oldData, focusOn: index}) } render(){ const list = this.state.data.map((item,index) => // this is the way how to get focused element <input key={item.id} value={item.type} onChange={this.change.bind(this, index)}/> ); return <div> {list} <p>Focused Element with index: {this.state.focusOn}</p> </div> } } React.render(<Example />, document.getElementById('container'));，并传递您希望进入句柄的参数。见下面的例子

{{1}}

fiddle

由于

React：如何知道哪个组件调用该函数

1 个答案: