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)}
    />

他们做同样的事情，将 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}
    />

Answer 2

如果您担心性能，可以使用es7 class属性。您不需要以这种方式在构造函数中手动绑定您的函数。所以DRY yay !!

windows.onchange

ReactJS onClick列表项

2 个答案: