将click事件传递给嵌套组件-React | 材料UI

Question

我有问题。当您单击listItem（全分隔的li元素）时，我想调用onChange内的复选框组件上的函数listItem。

我可以轻松地将该功能从复选框移动到父对象，但我会松开checked道具。

选中复选框本身不起作用，但只需打开控制台即可查看结果。我希望handleToggle函数在单击整个元素时正确触发（不仅是复选框）

  <List>
    {['first', 'second', 'third'].map((name, i) => (
      <ListItem key={i} dense button>
        <ListItemText primary={name} />
        <Checkbox
          disableRipple
          checked={false}
          onChange={(evt, checked) => this.handleToggle(evt, checked, name)}
        />
      </ListItem>
    ))}
  </List>

代码沙箱

编辑

我根本不想在此组件中使用状态。总结-如何将事件从ListItem（父母）传递给孩子（Checkbox）？

最终编辑：我已经找到了处理方法。不需要状态。只需两行简单的代码。

由于复选框状态由redux完全控制，因此我仅将onClickfunc移到ListItem元素中，其中代码中一行包含该元素：

...dispatch(toggle(!this.props.elements[nameOfElement], name));

无论如何，感谢大家的帮助。支持每个答案。

Answer 1

你真的不需要把checked道具传递给你的父母。您可以改为跟踪组件状态中已检查的行：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: []
    }
  }

  isChecked(name) {
    return this.state.checked.indexOf(name) > -1
  }

  handleToggle = (evt, name) => {
    if (this.isChecked(name)) {
      this.setState({
        checked: this.state.checked.filter(i => i !== name)
      })
    } else {
      this.setState({
        checked: [...this.state.checked, name]
      })
    }
  }

  render() {
    return (
      <List>
        {['first', 'second', 'third'].map((name, i) => (
          <ListItem key={i}
            onClick={evt => this.handleToggle(evt, name)} dense button>
            <ListItemText primary={name} />
            <Checkbox
              disableRipple
              label={name}
              checked={this.isChecked(name)}
            />
          </ListItem>
        ))}
      </List>
    )
  }
};

工作样本。