2017-09-03 17 views
0

私はユーザーとのチェックリストを持っています。チェックボックスをクリックすると、InputFieldに追加するか、InputFieldから削除する必要があります。Array(React-Native + Redux)から項目を削除

今のところADDのみ機能します。

import ... 

export default class NewEvent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onSelect = this.onSelect.bind(this); 
    } 

    onSelect = id => { 
    addMembers(id) } 

    findSelectedContacts = (contacts, membersArray) => { 
    const newArr = []; 
    contacts.forEach(item => { 
     if(membersArray.indexOf(item.id.toString()) > -1) { 
     newArr.push(` ${item.name}`) 
     } 
    }); 
    return newArr; 
    } 

    render() { 
    const { navigation, members, location, contacts } = this.props; 
    const membersArray = members ? members.split(',') : []; 
    const selectedArray = this.findSelectedContacts(contacts, membersArray) 
    const inputFill = selectedArray.join().trim(); 
    return (

      <InputField 
       customStyle={[eventStyles.input]} 
       icon="addGuest" 
       placeholder="Add guests" 
       onGetText={texts => { 
       this.handlerChangeText(texts) 
       }} 
       value={inputFill} 
      /> 
    ); 
    } 
} 

また、私は入力にゲストを追加減速、持っている:

import { handleActions } from 'redux-actions'; 
import * as types from '../actions/actionTypes'; 

export const initialState = { 
    members: '', 
}; 

const addMembers = (members, id) => { 
    const res = members ? `${members},${id}` : `${id}`; 
    return res; 
} 

export default handleActions(
    { 
    [types.ADD_GUEST]: (state, action) => ({ 
     ...state, 
     members: addMembers(state.members, action.payload), 
    }), 
    }, 
    initialState 
); 

を、私は私の減速を変更する方法を、教えてください? 1つのチェックボックスをクリックすると、InputFiledからユーザーを追加または削除する必要があります。

答えて

1

現在、メンバーリストをコンマ区切りの文字列として保存しているようです。より良い選択肢は、実際の配列としてリストを格納し、そのフォーマットで必要なときに文字列に変換することです。レンダリング。

それは次のようになりますため(既存のコードのスタイルに従うしようとして減速:

export const initialState = { 
    // initialState changed to array 
    members: [], 
}; 

const addMember = (members, id) => { 
    // add id to the end of the list 
    return members.concat(id); 
} 

const removeMember = (members, id) => { 
    // return a new list with all values, except the matched id 
    return members.filter(memberId => memberId !== id); 
} 

export default handleActions(
    { 
    [types.ADD_GUEST]: (state, action) => ({ 
     ...state, 
     members: addMember(state.members, action.payload), 
    }), 

    [types.REMOVE_GUEST]: (state, action) => ({ 
     ...state, 
     members: removeMember(state.members, action.payload), 
    }), 
    }, 
    initialState 
); 

をそして、あなたは、あなたのコンポーネントrender()方法では、文字列としてリストが必要な場合 - にできれたり、反応-ReduxのmapStateToPropsセレクタを使用すると、文字列に変換することができます?私は理解したよう

memberList = state.members.join(',') 
+0

が、私は、どこかに小道具のようremoveMemberを渡すことがありません必要 –

+0

ない正確にあなたがして、アクションを派遣する必要があります。タイプ 'タイプ.REMOVE_G UEST'と 'id'のペイロードを取得し、次にreduceMemberメソッドの呼び出しを処理します。 – jevakallio

+0

私はあなたのコードを使用し、メンバーを追加するだけだが削除しないので、私は尋ねた。 –

関連する問題