Как сделать опцию только один раз выбираемой в реакции?

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

Вы можете создать переменную count для каждого элемента, которым вы хотите управлять в состоянии, и увеличивать его каждый раз, когда вызываете функцию (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}

Надеюсь, это поможет!