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

Question

I am learning react by myself, and I am having a hard time doing something thought it would be simple.

In summary, I have a menu with a few items.

1. I want to be able to select that menu item and when that happens, open a form next to it, the form has inputs, and those input will be prefilled in case there's a saved value for it.

2. I want, if possible, to hide the editable form in case I click away from the form.

I am not sure how to do that. I have been playing with the props, and react is complaining about uncontrollable and controllable components. I read about it and I get and. Now I am not sure what is the best way to do this. I don't need a "hack" in case my solution is not the right way to do it. I am really looking for how people would handle similar problem in an elegant way in React.

Here's parts of the code I was writing, using 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

I would add an onClick event handler on the outermost parent element, that triggers a setState and changes the editMenuOpen to false.

Let's assume it's called handleCloseMenuClick .

But i would also need to add an event handler on my form itself that stops the event from handleCloseMenuClick from triggering when i click my form using event.stopPropagation()

Check the console in this example and see the difference when you remove the event.stopPropagation()