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

您需要将您的组件连接到 redux 存储。 Here's怎么做。简而言之，你需要这样的东西：

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

其中 connect 来自 react-redux。

Answer 2

我基本上将 item.checked 作为 item 传递给了我的 Editor 组件并像这样使用它

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

然后在我的 Editor.jsx 中我做了以下

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

React Redux 在复选框单击时添加直通

React Redux add line-through on checkbox click

reactjs

redux

react-redux