React Redux onay kutusunu işaretleyin onay kutusunu işaretleyin

Question

Bir onay kutusunu işaretledikten sonra bir satır eklemeye çalışıyorum. Reaksiyonu kullanıyorum ve redux. Eylem ve indirgeyici çalışır. checkedtrue olduğu zaman bu satır ekleyerek bir yol ihtiyacım var Lütfen bunu aşağıda denedim kodu bulun. Şimdiden teşekkürler.

/actions/items.js

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

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

/reducers/items.js

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

Bileşenlerinizi redux mağazasına bağlamanız gerekir. Here's nasıl yapılır. connectreact-redux gelen

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

: Kısacası gibi bir şey lazım.

Answer 2

Temelde benim Editor bileşene item olarak item.checked geçti ve benim Editor.jsx sonra öylesine

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

gibi kullandı ı aşağıdaki

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

yaptı

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