Question

为了描述我的问题，我将首先展示jsx标记：

<Selector>
    <ItemCategory title="A Special Category">
        <Item title="PDF File" file="/file.pdf" />
    </ItemCategory>
    <Item title="PDF File 2" file="/file2.pdf" />
</Selector>

基本上我有一个我想要显示的PDF列表。项目可以属于某个类别。在Selector-Component中，我将当前选择的PDF作为状态。请参阅下面的我当前的选择器组件。

export class Selector extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSelection: null
    };
  }

  render() {
    var currentSelection = this.state.currentSelection || <NothingSelected />;

    return (
      <div className={"selector " + this.props.className}>
        <div className="sidemenu">
          <HeaderItem />
          <div className="sidemenu-area">
            {this.props.children}
          </div>
        </div>
        <div className="selector-area">
          {currentSelection}
        </div>
      </div>
    );
  }
}

现在我想要点击一个Item-Component将当前选择更改为点击的项目。

知道如何添加onClick事件吗？

Answer 1

在此组件中，您需要this.state.selectedFile和this.itemSelected。将this.itemSelected传递给item组件。将this.state.selectedFile传递给选定的组件。在this.itemSelected中传递来自项目组件onClick和this.setState（{selectedFile：passedFile}）的文件。

<Selector currentSelection={this.state.selectedFile}>
        <ItemCategory title="A Special Category">
                <Item title="PDF File" file="/file.pdf" onClick={this.itemSelected}/>
        </ItemCategory>
        <Item title="PDF File 2" file="/file2.pdf" onClick={this.itemSelected}/>
</Selector>

选择器组件。

export class Selector extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        var currentSelection = this.props.currentSelection || null;

        return (
            <div className={"selector " + this.props.className}>
                <div className="sidemenu">
                    <HeaderItem />
                    <div className="sidemenu-area">
                        {this.props.children}
                    </div>
                </div>
                <div className="selector-area">
                    <Item title="PDF File 2" file={currentSelection} />
                </div>
            </div>
        );
    }
}

在项目组件中;

    render() {
        if (this.props.file == null) return null;
        return (
            <div id='pdfDisplay' onClick={this.handleClick}></div>
        )
    }

    _handleClick() {
        if (this.props.onClick) this.props.onClick(this.props.file);
    }

Answer 2

您可以将单击处理程序添加到父元素，然后在单击处理程序中进行过滤：

...
<div className="sidemenu-area" oncClick={this.selectItem}>
...

selectItem应该看起来像：

selectItem (e) {
  this.setState({
    currentSelection: e.target
  });
}

如果你的pdf项目更复杂，你可能需要添加更多逻辑来找到正确的元素。

另一个选项是在选择器组件中呈现pdf项。然后你可以直接在项目中添加监听器。

在动作中添加动态onClick事件

2 个答案: