Question

我正在学习自己的反应，而且我很难做一些事情，认为这很简单。

总之，我有一个包含几个项目的菜单。

我希望能够选择该菜单项，当它发生时，打开它旁边的表单，表单有输入，并且这些输入将被预先填充，以防有保存的值。
如果可能的话，我希望隐藏可编辑的表单，以防我点击表单。

我不知道该怎么做。我一直在玩道具，反应是抱怨无法控制和可控制的组件。我读到了它，我得到了。现在我不确定最好的方法是什么。如果我的解决方案不是正确的方法，我不需要“黑客”。我真的在寻找人们如何在React中以优雅的方式处理类似的问题。

这是我正在编写的代码的一部分，使用material-ui-next

class EditMenu extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);

    const itemsInfo = [
      {id: 11 , 
       title: 'title 1',
       description: 'desc 1'
      },
      {id: 22 , 
        title: 'title 2',
        description: 'desc 2'
       },
       {id: 33 , 
        title: 'title 3',
        description: 'desc 3'
       },
    ];

    let itemId = this.props.selectedItem;
    let item = _.find(itemsInfo, {id:itemId});

    this.state = {
      value: '',
      item: item,
      itemName: '',
      itemDescription: ''
    };
  }

  handleitemNameSetting = (event) => {
    event.preventDefault();
    debugger;
    this.setState({
        itemName: event.target.value
    });
  }

  render() {

    return (

      <div className="form-container">
        <form  >

          <TextField
            id="item-name"
            label="item Name"
            margin="normal"
            onChange={this.handleItemNameSetting}
            value={this.state.item.title}
          />
          <br />
          <TextField
            id="dish-desc"
            label="item Description"
            margin="normal"
            value={this.state.item.description}
          />
          <br />
          <TextField
            className="value-field-container"
            label="value"
            type="number"
            hinttext="item value" />

      </form>
        </div>
    );
  }
}


class MenuList extends React.Component {
    state = { editMenuOpen: false };

    handleClick = (id,event, item, ind) => {
      this.setState({editMenuOpen: true, selectedItem: id});
    };

    render() {
      const { classes } = this.props;
      const menuItems =  [
            {id: 11 , 
                title: 'title 1'
            },
            {id: 22 , 
                title: 'title 2'
            },
            {id: 33 , 
                title: 'title 3'
            },
         ];

      return (
          <div className={classes.root}>
              <Grid container spacing={24}>
                  <Grid item xs={2}>
                      <div>
                          <List
                              component="nav"
                              subheader={<ListSubheader component="div">Lunch Menu</ListSubheader>}
                              >

                              {menuItems.map(item => (
                              <ListItem button key={`${item.id}`} onClick= { () => this.handleClick(item.id)}>
                                  <ListItemText primary={`${item.title}`} />
                              </ListItem>
                              ))} 

                          </List>
                      </div>
                  </Grid>
                  <Grid item xs>
                      <div>
                         { this.state.editMenuOpen ? <EditMenu selectedItem={this.state.selectedItem}></EditMenu> : null }
                      </div>
                  </Grid>
              </Grid>

          </div>
      );
    }
  }

Answer 1

我会在最外层的父元素上添加onClick事件处理程序，触发setState并将editMenuOpen更改为false。

我们假设它被称为handleCloseMenuClick。

但我还需要在我的表单上添加一个事件处理程序，当我使用handleCloseMenuClick

单击我的表单时，该事件处理程序会阻止来自event.stopPropagation()的事件触发

检查此example中的控制台，并在删除event.stopPropagation()时看到差异

我如何动态传递值以反应形式

1 个答案: