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

Question

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

总而言之，我有一个包含一些项目的菜单。

1. 我希望能够选择该菜单项，并在发生这种情况时，打开它旁边的一个窗体，该窗体有输入，并且如果有保存的值，这些输入将被预先填充。

2. 如果可能，我想隐藏可编辑的表单，以防我单击离开表单。

我不确定该怎么做。 我一直在玩道具，而反应是抱怨无法控制和可控制的组件。 我读到它，然后得到。 现在，我不确定什么是最好的方法。 万一我的解决方案不是正确的解决方案，我就不需要“ hack”。 我真的在寻找人们如何在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 。

但是我还需要在表单本身上添加一个事件处理程序，以在我使用event.stopPropagation()单击表单时阻止handleCloseMenuClick触发事件

在此示例中检查控制台，并查看删除事件时的区别event.stopPropagation()