Question

我仍然在我的列界面上工作，现在我可以让用户向列中添加标签。
但是，我希望某些标签只能选择一次。
选择/添加特定标签后，应从选择中删除该选项。
我不知道该怎么实现。

我的代码已在此笔网上找到：https://codepen.io/darkinfore/pen/daJxyP?editors=0110

您可以在此笔中添加和删除标签，以便亲自查看。
添加和删除系统可以工作，但是我希望某些标签只能添加一次。
选择选项后，我要添加标签。

这是所选硬编码的代码：

<select value="" className="autocomplete-select" style={{border: "0px", outline: "none", width: "90px", height: "18px"}} id={props.index} onChange={props.onaddtag}>
    <option value="" disabled ></option>
    <option value="URL">URL</option>
    <option value="SUBTITLE">SUBTITLE</option>
  </select>

还有我的onaddtag函数：

onaddtag(e: any){
    const array = this.state.fields.columns;
    const newArray = [ ...array[e.target.id].tags, {name: e.target.value, attributes: [] } ];
    array[e.target.id].tags = newArray;
    this.setState({ fields: { columns: array } });
    this.setState({ canSave: true });
    console.log(this.state.fields.columns);
  }

有人可以替我做这个或解释如何实现吗？

Answer 1

您可以为要在状态下控制的每个元素创建一个计数变量，并在每次调用函数（onaddtag（）或要调用的任何其他函数）时对其进行递增。像：-

state : {
countforelement1=0,
countforelement2=0
}

然后在您要控制的每个元素上仅需单击一下，写为：-

<Element1 onClick=>{()=> this.state.countforelement1<=1 ? (function_to_be_called()) : null } ></Element1>

并且对于普通标签不使用任何条件，只需在onClick上调用该函数即可。

在函数之内

onaddtag(){ e==Element1 ? this.setState(countforElementx+=1) : null}

希望这会有所帮助！

如何仅在反应中选择一次就做出选择？

1 个答案: