クリック時の反応状態更新

Question

私は以下のようにデータ構造をリストアップする小さなコンポーネントを持っています。私がしたいのは、updateボタンをクリックして、voteのキーを増やしたいと思っていますが、私はそれを正しく行う方法を見つけられませんでした。 data州全体を更新する必要がありますか？私はそれを少し混乱させる。

let MOCKDATA = [ 
      { 
      id: 1, 
      name: 'Test 1', 
      vote: 0 
      }, 
      { 
      id: 2, 
      name: 'Test 2', 
      vote: 2 
      }]; 

LinkListPage.js

import React from 'react'; 
// import LinksData from '../LinksData'; 
import Links from './Links'; 
// import update from 'react-addons-update'; 

//localStorage.setItem('linksData', JSON.stringify(LinksData)); 

let MOCKDATA = [ 
     { 
     id: 1, 
     name: 'Test 1', 
     vote: 0 
     }, 
     { 
     id: 2, 
     name: 'Test 2', 
     vote: 2 
     }]; 



class LinkListPage extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     data: MOCKDATA 
    }; 

    this.update = this.update.bind(this); 

    } 

    componentDidMount() { 
    } 

    update() { 
    // this.setState({ 
    // data: 
    // }) 

    } 

    render() { 

    let list = this.state.data.map(links => { 
     return <Links key={links.id} update={this.update} data={links} />; 
    }); 

    return (
     <div> 
     <ul>{list}</ul> 
     {console.log(this.state.data)} 
     </div> 
    ); 
    } 

} 

export default LinkListPage; 

LinksPage.js

import React, {PropTypes} from 'react'; 

const Links = (props) => { 
    return (
    <li> 
     <p>{props.data.name}</p> 
     <p>{props.data.vote}</p> 
     <button onClick={props.update}>Up</button> 
    </li> 
); 
}; 

Links.propTypes = { 
    data: PropTypes.object, 
    name: PropTypes.string, 
    vote: PropTypes.number, 
    update: PropTypes.func 
}; 

export default Links; 

HomePage.js

import React from 'react'; 
import LinkListPage from '../containers/LinkListPage'; 

const HomePage =() => { 
    return (
    <div> 
     <LinkListPage /> 
    </div> 
); 
}; 

export default HomePage; 

答えを読み終えたら、私の最終結果は以下の通りです。とにかくありがとう。

LinksPage.js

const Links = (props) => { 
    return (
    <li> 
     <p>{props.data.name}</p> 
     <p>{props.data.vote}</p> 
     <button onClick={() => props.update(props.data.id)}>Up</button> 
    </li> 
); 
}; 

LinkListPage.jsこの場合

update(id) { 
    const findId = LinksData.filter(item => { 
     item.id === id ? item.vote++ : false; 
    }); 

    const data = Object.assign(...findId, LinksData); 


    this.state.data.sort((a, b) => { 
     return b.vote - a.vote; 
    }); 
    //localStorage.setItem('linksData', JSON.stringify(this.state.data)); 

    this.setState({data}); 

    } 

Answer 1

、私はLinksPageコンポーネントにonClickハンドラを追加します。

class Links extends React.Component { 

    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    } 

    onClick(e) { 
    // here you know which component is that, so you can call parent method 
    this.props.update(this.props.data.id); 
    } 

    render() { 
    return (
     <li> 
     <p>{this.props.data.name}</p> 
     <p>{this.props.data.vote}</p> 
     <button onClick={this.onClick}>Up</button> 
     </li> 
    ); 
    } 
}; 

そして、あなたのupdate機能変更：LinkListPageコンポーネントのメソッドを更新する

class LinkListPage extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     data: MOCKDATA 
    }; 
    this.update = this.update.bind(this); 
    } 

    update(itemId) { 
    // TODO: find and update your item, you can do it since you have an 'id' 
    const data = [...]; 
    this.setState({ 
     data, 
    }); 
    } 
} 

Answer 2

//パスのリンクIDを。更新方法原因状態がで不変であるに深い理解のためにhttps://www.sitepoint.com/immutability-javascript/

//使用immutablejsまたはES6を更新を処理するためにこれを読ん REFポイントは

update(id) { 
 
//find and update your item, you can do it since you have an 'id' 
 
//follow link: http://codereview.stackexchange.com/questions/43438/writing-a-function-to-add-or-modify-an-existing-object-inside-an-array 
 
    // this.setState({ 
 
    // data: 
 
    // }) 
 

 
    } 
 
const Links = (props) => { 
 
    return (
 
    <li> 
 
     <p>{props.data.name}</p> 
 
     <p>{props.data.vote}</p> 
 
     <button onClick={() => props.update(props.id)}>Up</button> 
 
    </li> 
 
); 
 
};