React Reduxチェックボックスにラインスルーを追加します。

Question

チェックボックスをオンにしてラインスルーを追加しようとしています。私は反応と還元を使用しています。アクションとレデューサーは機能します。 checkedがtrueのときにこのラインスルーを追加する方法が必要です。以下で実装しようとしたコードを見つけてください。前もって感謝します。

/actions/items.js

export const CHECK_ITEM = "CHECK_ITEM" 
export function checkItem(id) { 
    return { 
    type: CHECK_ITEM, 
    id 
    } 
} 

/reducers/items.js

case types.CHECK_ITEM: 
    return state.map((item) => { 
    if(item.id === action.id) { 
     return Object.assign({}, item, 
     { 
      checked: !item.checked 
     }) 
    } 

    return item 
    }) 

/components/Editor.jsx

renderValue =() => { 
    const onDelete = this.props.onDelete 
    const onCheck = this.props.onCheck 

    return (
     <div> 
     {onCheck ? this.renderCheckItem() : null} 
     <div onClick={this.props.onValueClick}> 
      <span className='value'>{this.props.value}</span> 
      {onDelete ? this.renderDelete() : null} 
     </div> 
     </div> 
    ) 
    } 

    renderCheckItem =() => { 
    return (
     <input 
     type="checkbox" 
     className='check-item checked' 
     defaultChecked={false} 
     onClick={this.props.onCheck} 
     /> 
    ) 
    } 

/components/Item.jsx

export default class Items extends React.Component { 
    render() { 
    const {items, onEdit, onDelete, onValueClick, onCheck, isEditing} = this.props 

    return (
     <ul className="items">{items.map(item => 
     <Item 
      className="item" 
      key={item.id} 
      id={item.id}> 
      <Editor 
      value={item.text} 
      onCheck={onCheck.bind(null, item.id)} 
      style={{textDecoration: item.checked ? 'line-through' : 'none'}} 
      /> 
     </Item> 
    )}</ul> 
    ) 
    } 
} 

Answer 1

コンポーネントをレデックスストアに接続する必要があります。 Here'sどのようにそれを行う。 connectはreact-reduxから来

export default connect(
    state => { 
    return {items: state.items}; 
} 
)(Items); 

：一言で言えば、あなたのような何かを必要としています。

Answer 2

は、私は基本的に私のEditorコンポーネントにitemとしてitem.checkedを通過して、私のEditor.jsxでそのように

... 
    render() { 
    const {item, value, onEdit, onValueClick, isEditing, onCheck, ...props} = this.props 
... 

のようにそれを使用し、私次

/components/Editor.jsx

renderValue =() => { 
    const onDelete = this.props.onDelete 
    const onCheck = this.props.onCheck 
    const itemChecked = this.props.item 
    const isChecked = {textDecoration: itemChecked ? 'line-through' : 'none'} 

    return (
     <div> 
     {onCheck ? this.renderCheckItem() : null} 
     <div onClick={this.props.onValueClick}> 
      <span style={isChecked} className='value'>{this.props.value}</span> 
      {onDelete && this.renderDelete()} 
     </div> 
     </div> 
    ) 
    } 

    renderCheckItem =() => { 
    return (
     <input 
     type="checkbox" 
     className='check-item' 
     defaultChecked={false} 
     onClick={this.props.onCheck} 
     /> 
    ) 
    } 

をしました

/components/Items.jsx

export default class Items extends React.Component { 
    render() { 
    ... 

    return (
     <ul className='items'>{items.map((item) => 
     <Item 
      className='item' 
      key={item.id} 
      id={item.id}> 
      <Editor 
      item={item.checked} 
      isEditing={item.isEditing} 
      ...