Question

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

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在复选框点击时添加直通

2 个答案: