javascript - 将点击事件传递给嵌套组件 - React | Material -UI

Question

我有问题。当您单击 listItem(整个分离的 li 元素)时，我想在 listItem 的复选框组件上调用 onChange 函数>。

我可以轻松地将该函数从复选框移动到父级，但我会松开 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>

Code SandBox

编辑

我根本不想在这个组件中使用状态。总结 - 如何将事件从 ListItem(父级)传递给它的子级(Checkbox)？

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

由于复选框状态完全由 redux 控制，我只是将 onClick 函数移动到 ListItem 元素，其中一行代码在其正文中:

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

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

Answer 1

Roby，我也打败了它，但我处理状态变化的方式略有不同。

想法是管理父状态中所有复选框的状态(未选中)。然后您在父级中有一个 handleToggle 函数，它将使用所有复选框的选中值更新父级状态。

此状态然后作为 Prop 传递给每个复选框。

此外，将 map 中的索引用作 ListItem 中的键也不是一个好主意。如果您在列表中添加和删除项目，React 会混淆哪个项目是哪个。

代码如下:

从“react”导入 React；

import { render } from "react-dom";
import Hello from "./Hello";

import List, {
  ListItem,
  ListItemSecondaryAction,
  ListItemText
} from "material-ui/List";
import Checkbox from "material-ui/Checkbox";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

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

  componentWillMount() {
    this.setState({
      list: ["first", "second", "third"],
      listChecked: [{ first: false }, { second: false }, { third: false }]
    });
  }

  handleToggle = evt => {
    console.log(evt.target.checked);
    const name = evt.target.name;
    this.setState({ name: !this.state.listChecked[name]})
    // this.props.dispatch(x(checked, name));
  };

  render() {
    const { list } = this.state;
    return (
      <List>
        {list.map((name, i) => (
          <ListItem key={name} dense button>
            <ListItemText primary={name} />
            <Checkbox
              disableRipple
              checked={this.state.listChecked[name]}
              onChange={this.handleToggle}
            />
          </ListItem>
        ))}
      </List>
    );
  }
}

render(<App />, document.getElementById("root"));

和 CodeSandbox Example