reactjs - 在两个组件之间来回移动列表项

我正在学习一个小型练习来学习ReactJS。我正在做一个API调用来显示来自iTunes的列表，当单个列表项被点击时，他们移动到一个新的列表（类似队列）。当在新列表中点击时，它们会移回原始列表，但是当列表项移回时，列表项不会从新列表中移除。这里是我的问题的的jsfiddle：https://jsfiddle.net/6k9ncbr6/reactjs - 在两个组件之间来回移动列表项

class App extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
      searchResults: [], 
      moveResults: [] 
    } 

    this.handleEvent = this.handleEvent.bind(this); 
} 

showResults = (response) => { 
    this.setState({ 
     searchResults: response.results, 
     moveResults: [] 
    }) 
} 

search = (URL) => { 
    $.ajax({ 
     type: 'GET', 
     dataType: 'json', 
     url: URL, 
     success: function(response) { 
      this.showResults(response); 
     }.bind(this) 
    }); 
} 

handleEvent = (clickedTrack) => { 
    const { searchResults, moveResults } = this.state; 
    const isInSearchResults = searchResults.some(result => result.trackId === clickedTrack.trackId); 

    this.setState({ 
     searchResults: isInSearchResults ? searchResults.filter(i => i.trackId !== clickedTrack.trackId) : [...searchResults, clickedTrack], 
     moveResults: isInSearchResults ? [...moveResults, clickedTrack] : moveResults.filter(i => i.trackId !== clickedTrack) 
    }); 
} 

componentDidMount() { 
    this.search('https://itunes.apple.com/search?term=broods'); 
} 

render(){ 
    return (
     <div> 
      <Results 
       searchResults={this.state.searchResults} 
       handleEvent={this.handleEvent}/> 
      <Results 
       searchResults={this.state.moveResults} 
       handleEvent={this.handleEvent} /> 
     </div> 
    ); 
    } 
} 
class Results extends React.Component { 
    render(){ 
    const { handleEvent, searchResults } = this.props; 
    return(
     <ul> 
      {this.props.searchResults.map((result, idx) => 
        <ResultItem 
       key={`${result.trackId}-${idx}`} 
       trackName={result.trackName} 
       track={result} 
       handleClick={handleEvent} /> 
        )} 
     </ul> 
    ); 
    } 
} 

    class ResultItem extends React.Component { 
    render(){ 
     const { handleClick, track, trackName } = this.props 
    return <li onClick={() => handleClick(track)}> {trackName} </li>; 
    } 
} 

ReactDOM.render(
    <App />, document.getElementById('root') 
);

来源

2017-07-04 Bobby Tables

你离开的属性名称：

moveResults: isInSearchResults ? [...moveResults, clickedTrack] : moveResults.filter(i => i.trackId !== clickedTrack.trackId)

的clickedTrack.trackId缺少在现有代码的.trackId。

这是working jsFiddle。

来源

2017-07-04 23:25:12

reactjs - 在两个组件之间来回移动列表项

回答

相关问题