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

【问题标题】：React Redux add line-through on checkbox clickReact Redux 在复选框单击时添加直通
【发布时间】：2016-04-05 22:13:43
【问题描述】：

我试图在选中复选框后添加一个直通。我正在使用 react 和 redux。动作和减速器起作用。当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>
    )
  }
}

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

您需要将组件连接到 redux 存储。 Here's 怎么做。简而言之，您需要以下内容：

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

connect 来自react-redux。

【讨论】：

否，如果我将我的项目连接到商店，我会失去我在列表组件中的过滤。必须有另一种方式。我已经从我的列表中传递项目。 @lukasz

【解决方案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}
            ...

【讨论】：