在 material ui 芯片输入中删除元素时出现问题

Question

我想限制输入的标签数量，这个已经解决了，但是现在如果我想删除一个芯片，在输入中再次点击它似乎并没有被删除

到目前为止，这是我的代码

var chips = []
<ChipInput
        value={chips}
        placeholder={'Escribe'}
        size={'medium'}
        variant={'outlined'}
        inputMode={'url'}
        onAdd={(chip) => handleAddChip(chip)}
        onDelete={(chip, index) => {chips.pop(index)}}
            />

使用这个功能我只能输入3个元素

const handleAddChip = (chip) =>{
  if(chips.length <= 2){
    chips.push(chip)
  }
}

所以问题是当我删除一个时，它不会删除它，直到我再次点击芯片输入

Answer 1

您应该将筹码阵列移动到反应状态。渲染方法中使用的任何动态数据都应该是状态的一部分。当您更新状态时，React 将重新渲染。如果你不让这个数据成为你状态的一部分，React 将不知道它需要重新渲染你的组件，所以你会看到陈旧的数据，直到其他东西触发重新渲染。

或者，您可以在修改 chips 数组后调用 this.forceUpdate()。但是，不建议这样做。

状态示例：

this.state = {
    chips: []
};

...

const handleAddChip = (chip) =>{
  if(this.state.chips.length <= 2) {
    this.setState({
      chips: [...this.state.chips, chip] //shorthand way to copy an array and add a new element
    });
  }
}

const handleRemoveChip = (chip) => {
  this.setState({
    chips: this.state.chips.filter(c => c != chip) //filter will produce a copy of the array
  });
}

以上代码适用于基于 class 的组件。

如果您使用的是基于函数的组件，则可以通过引入 useState 挂钩来实现相同的目的。

function MyComponent() => {
  var [chips, setChips] = useState([]);

  const handleAddChip = (chip) => {
    if(chips.length <= 2) {
      setChips(
        [...chips, chip] //shorthand way to copy an array and add a new element
      );
    }
  }

  const handleRemoveChip = (chip) => {
    setChips(
      chips.filter(c => c != chip) //filter will produce a copy of the array
    );
  }

  return <ChipInput /* ... */ />
}

这是所有未经测试的代码，可能有错误，但至少应该是一个不错的指南。

在 material ui 芯片输入中删除元素时出现问题

Problem when deleting an element in material ui chip input

reactjs

material-design

material-ui