Блог

Поэтому я пытаюсь условно отобразить входной тег, поэтому я использую функцию, а не просто помещаю все это в оператор return. Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я вводлю одно слово во входной тег, оно теряет фокус, и мне приходится нажимать на него снова, чтобы снова сфокусироваться. Мой код выглядит так:

 function App() {
    function InputTag() {
        if (someCondition) {
            return (
                <input onChange={(e) => setState(e.target.value)} value={State} />
            )
        } else {
            return (
                <input disabled value={State} />
            )
        }
    }
    return (
        <div>
            <InputTag />
        </div>
    )
}
 

После некоторого устранения ошибок я обнаружил, что эта проблема возникает, когда я использую функцию для возврата входного тега, но в моем случае я должен использовать функцию для возврата входного тега.

Вы можете столкнуться с этой проблемой по адресу : https://codesandbox.io/s/xenodochial-bassi-3gmyk

InputTag переопределяется каждый раз App при рендеринге. И App перерисовывается каждый раз onChange при запуске события, потому что его состояние обновляется.

Одним из решений было бы выйти InputTag за пределы App , передав состояние и установщик состояний в качестве реквизитов компонентов.

 import { useState } from "react";

export default function App() {
  const [State, setState] = useState("");

  return (
    <div className="App">
      <InputTag State={State} setState={setState} />
    </div>
  );
}

function InputTag({ State, setState }) {
  return <input onChange={(e) => setState(e.target.value)} value={State} />;
}
 

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

Если вы отключаете ввод только на основе someCondition , вы можете легко сделать это в App инструкции return.

 import { useState } from "react";

export default function App() {
  const [state, setState] = useState("");
  const [someCondition, setSomeCondition] = useState(true);

  return (
    <div className="App">
      <input
        onChange={(e) => setState(e.target.value)}
        value={state}
        disabled={!someCondition}
      />

      <button onClick={() => setSomeCondition(!someCondition)}>
        someCondition: {someCondition.toString()}
      </button>
    </div>
  );
}