Question

在此代码中，我有一个复选框列表，每个复选框旁边都有一条消息显示已选中/未选中我现在需要在选中每个复选框时根据checbox的状态更改该消息

Checkbox is selected = 'selected '
Checkbox is not selected = 'unselected '

和codepen http://codepen.io/fernandooj/pen/ggXGvj 感谢

Answer 1

我稍微重构了你的代码，并在这里分叉你： http://codepen.io/mrlew/pen/wgPjre

我在状态中创建了一个myItems数组，这是根据您的allElements和selectedElements道具构建的。

在你的构造函数中：

const myItems = props.allElements.map( (item) => {
  return {
    value: item,
    checked: (props.selectedElements.indexOf(item) > -1)
  }
})

此数组的每个项目跟踪checked属性，value。

此外，您可以使用参数（docs此处）在附加updateStateList的回调中调用.bind。这样，您可以设置this上下文并设置额外参数。在这种情况下非常有用。

onClick={this.updateStateList.bind(this, item)}

updateStateList方法首先使用新值创建一个新数组（使用map），并使用此新数组创建setState：

  updateStateList(selectedItem, e){
    let myNewItems = this.state.myItems.map( (item) => {
      if (item.value == selectedItem.value) item.checked = !selectedItem.checked
      return item
    })
    this.setState({myItems: myNewItems})
  }

我冒昧地删除了其他东西。

希望它有所帮助！

注意：如果您的父组件不关心关于结果，则将道具作为初始状态仅被视为推荐模式，因为您将对数据进行去同步（两个投掷的来源）。 “正确”的方法是让一些父进行转换，你的set-of-checkbox只传递用户点击事件并接收已经计算好的数组对象。

如果选中复选框，则更改值

1 个答案: