javascript - 如何在reactjs中通过父元素的onClick控制子元素？

Question

在 React 中制作基本应用程序如下:

父容器通过ajax接收状态并包含四列，左列 - 所有消息项，第二列消息正文(单击消息元素以及控件时应显示)，下一个 - 消息控件(下一个，上一个)和 Action 类型:

如何将控件正确附加到子元素，例如将 onClick 附加到消息元素？这是家长的片段:

var ModerationContainer = React.createClass({
    getInitialState: function () {
        return {data: []};
    },
    componentDidMount: function () {
      ...            
    },
    LoadMessagesFromApi: function () {
        jQuery.ajax({
        ... // loads messages from json api into state
        });
    },
    testor: function () {
        alert();
    },
    render: function () {
        var allMessageItems = this.state.data.map(function (message) {
            return (
                <MessageItem id={message.id} key={message.id} onClick={this.testor}/>
            );
        }, this);
        return (
            <div>
                <div className="col-md-2 messageColumn">
                    {allMessageItems}
                </div>
                <MessageBodyColumn/>
                <ControlsColumn />
                <BlockColumn />
            </div>
        );
    }
});

在我点击消息 block 后，没有执行 onclick 事件，尽管我在渲染消息 block 时将 this 附加到 map，我错了什么？

此外，如果没有人点击，如何自动选择第一个消息项目？

任何来自有经验的 react 人员的教程提示或链接都非常感谢

Answer 1

我会纠正MessageItem在父级上就像

<MessageItem key={message.id} onClick={this.testor.bind(this, message.id) }/>

然后在你的 MessageItem 里面您可以从专业人士那里获取 onClick 处理程序，假设 MessageItem 是 div你的渲染函数可能是这样的

render()
{
   const onClick = this.props.onClick;
   const label = `Message${this.props.key}`;

   return( <div onClick={ onClick }> { label }</div>)

}

如果你写你的测试器像

testor: function ( id ) {
    alert( id );
}

您可以看到点击消息的id。