0

Как сделать несколько проверок в шаблонной строке? Мне необходимо чтобы type у input соответствовал своему типу при создании элемента в сравнении с полем из JS объекта

Попытка:

<input type="${
          item.type == "tel" &&
          item.type !== "checkbox" &&
          item.type !== "text" &&
          item.type !== "radio"
            ? "tel"
            : "checkbox"
        }"

2
  • Как вы в дальнейшем этот input помещаете в HTML? Если вы хотите сделать это просто в HTML, то не выйдет.
    – SwaD
    Commented 30 дек. 2022 в 17:08
  • 1
    Зачем вставлять запускаемый код, елси он не делает ничего? Дополните ваш код нужнымми данными, чтобы мы хотябы видели что такое item. И мне кажется что вы используете React хотя ничего об этом не сказано ни в тегах ни в самом вопросе
    – EzioMercer
    Commented 30 дек. 2022 в 17:17

1 ответ 1

0

Ответить на этот вопрос, несколько затруднителен, поскольку по коду, предоставленному вами, трудно определить контекст использования. Потому рассмотрим несколько случаев:

сырой html

В случае, если это простая html-разметка без каких-либо дополнительных надмножеств, то в такой разметке атрибутам значение передается обычной строкой, которая не выполняет никакой код, независимо от используемого разделителя

Шаблонный литерал

Под шаблонным литералом в javascript подразумевают строки, которые начинаются и заканчиваются с символом `. Они знаменательны тем, что внутри них можно делать вставки javascript кода:

var a = 5;
var b = `line ${a + 1}`; 
console.log(b);  // line 6

Таким образом ваш код внутри шаблонного литерала мог бы выглядеть так так

jsx разметка

JSX - Это расширение синтаксиса javascript, позволяющее писать (совмещать) html разметку внутри javascript-кода. Его не понимают браузеры, поэтому нужен транспилер. Этот формат стал очень популярным благодаря росту популярности react, и сегодня его взяли на вооружение и другие не столь популярные библиотеки и фреймворки. Ваш код на реакт мог бы выглядеть так:

function App(){

    const [item, setItem] = React.useState({type: 'tel'});
    
    return <div>
        <button onClick={()=>setItem({type: (item.type == 'tel' ? 'checkbox' : "tel")})}>
            Click!
        </button>
        <input type={item.type == "tel" &&
          item.type !== "checkbox" &&
          item.type !== "text" &&
          item.type !== "radio"
            ? "tel"
            : "checkbox"} />
        <br/>
    </div>;
}

Вот рабочий пример https://coding-style.ru/code_reviews/345/edit

Lit-html

Существует так же много других полезных инструментов, которые позволяют использовать подобный синтаксис. Например, ниже пример использования lit элемента (на тс):

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('my-element')
export class MyElement extends LitElement {
  @property()
  item: {type: string} = {type: 'tel'};
  
  changeType(){    
    this.item = {type: this.item.type == 'tel' ? 'checkbox': 'tel'};
  }

  render() {
    return html`      
      <button @click=${this.changeType}>Flip a coin!</button>
      <input type="${
          this.item.type == "tel" &&
          this.item.type !== "checkbox" &&
          this.item.type !== "text" &&
          this.item.type !== "radio"
            ? "tel"
            : "checkbox"
        }" />
        ${this.item.type}
    `;    
  }
}

Кстати тот кусок, который вы привели, внутри тегового шаблона к функции render LitElement-а вполне корректно бы работал. Так что все зависит от того контекста, в котором вы используете данный кусок кода

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.