javascript - 在文本框中输入值后，如果我按回车键，应该会看到一个带有输入值的新芯片

Question

• 当我单击文本框文本时，会打开一个菜单，在该文本框中我需要在文本框中输入一些值。
• 在文本框中输入值后，如果我按回车键，我应该会看到一个带有输入值的新芯片。
• 所以我想我会创建一个 Onchange 事件并将值传递给芯片组件
• 但是这些值没有通过。
• 我想我需要将一个对象传递给该数组。

chipData.push(handleTextBox); console.log("handleTextBox after push chipData--->", chipData);

• 你能告诉我如何解决它。
• 在下面提供我的代码片段和沙箱。

https://codesandbox.io/s/material-demo-99sf8

demo.js

 const [chipData, setChipData] = React.useState([
    { key: 0, label: "Angular" },
    { key: 1, label: "jQuery" },
    { key: 2, label: "Polymer" },
    { key: 3, label: "React" },
    { key: 4, label: "Vue.js" }
  ]);

  const [hideChip, setHideChip] = React.useState([false]);

  const handleClick = event => {
    setAnchorEl({ type: "icon", target: event.currentTarget });
  };

  const handleClickFilter = event => {
    setAnchorEl({ type: "textbox", target: event.currentTarget });
  };

  const handleTextBox = event => {
    console.log("handleTextBox event--->", event);
    console.log("handleTextBox event.target.value--->", event.target.value);
  };

  console.log("handleTextBox handleTextBox--->", handleTextBox);
  console.log("handleTextBox chipData--->", chipData);

  chipData.push(handleTextBox);
  console.log("handleTextBox after push chipData--->", chipData);

 <Menu
              id="simple-menu"
              anchorEl={
                anchorEl && anchorEl.type === "textbox" && anchorEl.target
              }
              open={Boolean(anchorEl && anchorEl.type === "textbox")}
              onClose={handleClose}
            >
              <MenuItem>
                <form
                  className={classes.container}
                  noValidate
                  autoComplete="off"
                >
                  <TextField
                    id="standard-name"
                    label="Name"
                    className={classes.textField}
                    onChange={handleTextBox}
                    // value={values.name}
                    // onChange={handleChange('name')}
                    margin="normal"
                  />
                </form>
              </MenuItem>
            </Menu>

            <Paper className={classes.root}>
              {chipData.map(data => {
                let icon;
                console.log("setHideChip--->", setHideChip);

                if (data.label === "React") {
                  icon = <TagFacesIcon />;
                }

                return (
                  <Chip
                    key={data.key}
                    icon={icon}
                    label={data.label}
                    onDelete={handleDelete(data)}
                    className={classes.chip}
                  />
                );
              })}
            </Paper>

标签： javascripthtmlreactjsreduxmaterial-ui

Answer 1

尝试使用此代码。

<TextField
      fullWidth={true}
        id="standard-name"
        label="Tags"
        className={classes.textField}
        onChange={handleChange('tag')}
        onKeyDown={(e) => pushToarray(e)}
        margin="dense"
      />

输入时，您应该会看到添加了标签

 function pushToarray(e){
    if(e.key == 'Enter'){
      e.preventDefault();

    setValues({  tags : [...values.tags ,e.target.value] ,
                  tag : ''})
    }
  }

和文本框中的普通句柄更改：

 const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
    console.log(values)
  };

像这样初始化状态我已经用空数组初始化，你可以使用键：

const [values, setValues] = React.useState({
    tag :'',
    tags: [],
  })

这是您的 handleDelete 删除芯片的功能：

function handleDelete(item){
    var rm = values.tags.indexOf(item);
      values.tags.splice( rm, 1)

      setValues( { tags : values.tags})
  }

这就是你的芯片组件应该是的样子

<Paper className={classes.root}>
            {
        values.tags && values.tags.map( (tag ,id) =>(
          <Chip color="default" className={classes.chip} onDelete={() => handleDelete(tag)} key={id} label={tag}/>
        ))
      }