模板文字 - 更改元素的内部 HTML（onInput 事件）

Question

所以我以前从未使用过模板文字，但现在我需要使用一个模板，它似乎包含一个带有模板文字的表单

这是我的输入之一：

<input
        type="number"
        className="mf-input "
        min="1900"
        max="2099"
        step="1"
        id="curyear"
        name="currentyear"
        placeholder="${ parent.decodeEntities(`Current Year`) } "
        onInput=${parent.handleChange}
        aria-invalid=${validation.errors['currentyear'] ? 'true' : 'false'}
        ref=${el => parent.activateValidation({"message":"This field is required.","minLength":1900,"maxLength":2099,"type":"by_character_length","required":false,"expression":"null"}, el)}
            />

            <${validation.ErrorMessage}
          errors=${validation.errors}
          name="currentyear"
          as=${html`<span className="mf-error-message"></span>`}
          />

我想做的是，在 onInput 方法中，我还想更改元素的 innerHTML，而不是处理验证：

  <h2 class="elementor-heading-title elementor-size-default" id="curyeartext">Current Year</h2>

我已经尝试了好几个小时了，但还是无法正常工作。

编辑：事实证明，它们是模板文字而不是 reactJS

Answer 1

避免在 React 中设置 innerHTML，use state instead。这是因为如果 html 在 React 控制的节点中，React 将在重新渲染时覆盖您修改的 DOM。

export default function MyReactComponent() {
    var [ currentInput, setCurrentInput ] = React.useState();

    return <>
       <input
        type="number"
        className="mf-input"
        min="1900"
        max="2099"
        step="1"
        name="currentyear"
        onInput={(e) => setCurrentInput(e.target.value)}
        value={currentInput}
       />
       <h2 class="elementor-heading-title elementor-size-default" id="curyeartext">
          {currentInput}
       </h2>
    </>;

}

但是，如果您遇到无法避免的情况，您可以通过仅指定一个 ref 来告诉 React 忽略一个节点——即没有其他道具或子 JSX：

export default function MyReactComponent() {
   return <div ref={divRef => {
      divRef.innerHTML = "Hello <b>world!</b>";
   }} />
}

这种技术通常用于将非 React 特定的 JS 库集成到 React 中，因为您可以对该 DOM 节点的内容做任何您想做的事情。

Answer 2

我设法通过在 return:

上面添加一个函数来做到这一点

  function myfunction() {
      document.querySelector('#curyeartext').innerHTML = document.querySelector('#curyear').value;
      document.querySelector('#lastyear').innerHTML = document.querySelector('#curyear').value-1;
      document.querySelector('#yearbefore').innerHTML = document.querySelector('#curyear').value-2;
    }

并在 onInput 事件处理程序中调用它

onInput=${myfunction}

模板文字 - 更改元素的内部 HTML（onInput 事件）

Template Literals - Changing the Inner HTML of an element (onInput event)

javascript

html

template-literals