ReactJS onClick 在列表项中

Question

我有一个列表，我想在单击列表项时设置 onClick 事件。但是即使我绑定了函数，我的函数也没有触发。

我看过 TODO 示例（TODO GITHUB）。在那个例子中，onClick 列表项将调度一个动作，最后它会改变全局状态（Redux Store）。

我想要的是，当我单击列表项时，它不会更改全局状态，而只会更改本地状态。我已经初始化了本地状态和 onClickItemHandler 函数，但似乎我的函数没有执行（chrome 控制台中没有 console.log 结果）。

这是我的代码

// Searchable Component
class Searchable extends Component{
  constructor(props,context){
    super(props);
    this.state ={
      listAccount: [],
      style:{
        searchResultList:{
          listStyle: 'none',
          width: '100%',
          height: '0em'
        },
        searchResultItem:{
          listStyle: 'none',
          width: '100%',
          height: '0em'
        },
      }
    };

    this.onChange = this.onChange.bind(this);
    this.onFocus = this.onFocus.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.onItemClickHandler = this.onItemClickHandler.bind(this);
  }

  onChange(event){
    this.props.onInputChange(this.props.data.type, this.props.data.id,event.target.value);
  }

  onFocus(event){
    console.log("input on focus");
    const showResultList= {
      height: '10em',
      overflow:'auto'
    };

    const showResultItem= {
      height: '2.4em',
      visibility: 'visible'
    };

    let style= this.state.style;
    style.searchResultList = showResultList;
    style.searchResultItem = showResultItem;
    this.setState({style});
  }

  onBlur(event){
    console.log("input on Blur");
    const showResultList= {
      height: '0',
      overflow:'hidden'
    };

    const showResultItem= {
      height: '0',
      visibility: 'collapse'
    };

    let style= this.state.style;
    style.searchResultList = showResultList;
    style.searchResultItem = showResultItem;
    this.setState({style});
  }

  onItemClickHandler(event){
    console.log("test");
    console.log(event.target);
  }

  render(){
    return(
      <div className="searchable">
        <input type="search" className="input-searchable" value={this.props.data.input} onChange={this.onChange} onFocus={this.onFocus} onBlur={this.onBlur}/>
        <div className="search-result">
          <SearchResultList
            ResultList={this.props.accounts}
            listStyle={this.state.style.searchResultList}
            listItemStyle={this.state.style.searchResultItem}
            onClick={this.onItemClickHandler}
          />
        </div>
      </div>
    );
  }
}

// SearchResultList Component
const SearchResultList = ({ResultList, listStyle, listItemStyle, onClick}) => (
  <ul style={listStyle} onClick={onClick}>
  {
    ResultList.map((item,idx) =>
      <SearchResultItem
        key={++idx}
        style={listItemStyle}
        text={item.name}
        onClick={onClick}
        />
    )
  }
  </ul>
);


// SearchResultItem Component
const SearchResultItem = ({ onClick, text, style}) => (
  <li
    style={style}
    onClick={onClick}
    >
    {text}
  </li>
);

Answer 1

您需要绑定您的 onClick 函数：

尝试

    <SearchResultList
      ResultList={this.props.accounts}
      listStyle={this.state.style.searchResultList}
      listItemStyle={this.state.style.searchResultItem}
      onClick={::this.onItemClickHandler}
    />

或者

    <SearchResultList
      ResultList={this.props.accounts}
      listStyle={this.state.style.searchResultList}
      listItemStyle={this.state.style.searchResultItem}
      onClick={this.onItemClickHandler.bind(this)}
    />

他们做同样的事情，将其绑定到你的函数。我相信它是在渲染时执行的，因为它没有正确绑定。

另外，如果您将这些方法传递给多个子级并且担心性能，您可以在构造函数中绑定，如下所示：

constructor(props) {
    super(props)
    this.onItemClickHandler = this.onItemClickHandler.bind(this)
}

然后使用

   <SearchResultList
      ResultList={this.props.accounts}
      listStyle={this.state.style.searchResultList}
      listItemStyle={this.state.style.searchResultItem}
      onClick={this.onItemClickHandler}
    />