Question

如果我有这样的布局： - 应用程序 - 清单 - 项目我想只选择一个项目，让其他人禁用，如何将事件从项目传递给App？

例：

/* In App */
handleChecked: function() {}
<List onHandleChecked={this.handleChecked} />

/* In List Component */
<Item onChecked={this.props.onHandleChecked} />

/* In 
handleChecked: function() {
  // ajax query
  // check on this

  // turn off other items
  this.props.onChecked(...);
}

似乎行不通。

最终问题 感谢您的帮助......我发现最后一个问题是指针this ...

var LocaleList = React.createClass({
    render: function() {
        var items = this.props.data.map(function(item) {
            return (
                <LocaleItem data={item} onMarkAsStd={this.props.onHandleOnMarkAsStd.bind(this)} />
            )
        }.bind(this));
        return (
            <tbody>
                {items}
            </tbody>
        )
    }
})

在这里，items需要另一个绑定（此）...否则，它无法获取属性onHandleOnMarkAsStd :(

Answer 1

您需要将selected项目存储在List的状态中。并将onClick处理程序传递给Items。

以下是示例（按run），然后点击项目。

＆＃13;

var App = React.createClass({
  render() {
    return <div>
      List:
      <List items={[1, 2, 3]} />
    </div>
  }
})

var List = React.createClass({

   getInitialState() {
     return {
       selected: null,
     }
   },
   
   // data form child component 
   // this.props.onClick.bind(this, this.props.data)
   _handleClick(data) {
      this.setState({selected: data});
   },

   render() {
     var self = this;
     return <div> 
       {this.props.items.map(function(item) {
        return <Item onClick={self._handleClick} data={item} isSelected={self.state.selected == item} />;
   })}
     </div>
   }
});


var Item = React.createClass({
 
  render() {
    return <div onClick={this.props.onClick.bind(this, this.props.data)}>Item #{this.props.data} - {this.props.isSelected ? 'Selected' : 'Disabled'}</div>
  }
})
                     
ReactDOM.render(<App />, document.body);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

如何在reactjs中将事件（动作）从内部组件转移到外部组件？

1 个答案: