1

在选中复选框后，我试图添加一个直通。我正在使用 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>
    )
  }
}
4

2 回答 2

1

您需要将组件连接到 redux 存储。这是如何做到的。简而言之，您需要类似的东西：

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

react-reduxconnect来自哪里。

于 2016-04-05T22:29:31.213 回答
0

我基本上传递给我的组件并像这样使用item.checked它itemEditor

  ...
  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}
            ...
于 2016-04-06T03:49:16.073 回答