检查输入作为它的类型 ReactJS

Question

我想在输入时检查输入，而不是异步按下键或按钮。如果一个人输入了超过 4 个字母，我想将变量值设置为 true。

我认为如果在用户单击输入框外部后将值设置为 true （如果值为 4 个或更多字母）也可以，但我更喜欢前者

模拟代码

var hasTypedMoreThan4Letters = false; //changes to true when more than 4 letters are typed in inp1

<input type="text" className="input1" id="inp1" onChange={onTypingMoreThan4Letters}/>

不确定它是否有帮助，但下面的模拟图片

Answer 1

您需要受控组件（受控输入）。 这是我使用钩子的版本。 您将获得在count变量中输入的符号数量。

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  function handleInput(e) {
    setInput(e.target.value);
    setCount((prev) => prev + 1);
  }
  const [input, setInput] = useState("");
  return (
    <div className="App">
      <input value={input} onInput={handleInput} />
      <p>{count}</p>
    </div>
  );
}

Answer 2

你可能会做这样的事情。 这将检查是否输入了超过 4 个字母，如果 hasMore 为真，则显示一条消息。

import React from 'react';
export default function App() {

  const [hasMore, setHasMore] = React.useState(false)
  const [val, setVal] = React.useState("");

  const hasTypedMoreThan4Letters = (e)=>{
    setHasMore(e.target.value.length > 4)
    setVal(e.target.value)
  }
  return (
    <div className="App">
<input type="text" className="input1" id="inp1" value={val} onChange={hasTypedMoreThan4Letters}/>
      {hasMore && (
        <h1> has more than 4 letters</h1>
      )}
    </div>
  );
}

Answer 3

我看不出你应该为值的长度设置第二个状态的理由。

function App() {
  const [value, setValue] = useState('');
  const hasTypedMoreThan4Letters = value.length > 4;

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  return <input onChange={handleChange} value={value} />;
}

Answer 4

你可以像这样创建一个函数。

因此，我为输入值和检查超过 4 个字符创建了两种状态。

import { useState } from "react";


const MyComponent = () => {
  const [val, setVal] = useState("");
  const [greaterthanfour, setGreaterthanfour] = useState(false);
 
  const handleChange = (e) => {
     setVal(e.target.value);
     if( val.length > 4) setGreaterthanfour(true);
  }

  return (
     <div>
       <input value={val} onChange={handleChange} />
       {
         greaterthanfour ?
              ( <div> You have entered MORE than 4 characters </div> )
              :
              (<div> You have entered LESS than 4 characters </div> )
        }
     </div>
  )
}

export default MyComponent;