после ввода значения в текстовое поле, если я нажму Enter, должен увидеть новый чип с введенным значением в нем - PullRequest
Новая
       18

после ввода значения в текстовое поле, если я нажму Enter, должен увидеть новый чип с введенным значением в нем

0 голосов
/ 12 октября 2019
  • когда я нажимаю текст в текстовом поле, открывается меню, в этом текстовом поле мне нужно ввести какое-то значение в текстовое поле.
  • после ввода значения в текстовое поле, если я нажму клавишу ввода, я должен увидетьновый чип с введенным значением.
  • , поэтому я подумал, что создам событие 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>

1 Ответ

0 голосов
/ 12 октября 2019

попробуйте этот код. 

<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 : ''})
    }
  }

и нормальный handleChange изменения текста в поле: 

 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}/>
        ))
      }

...