리액트 훅으로 입력 처리

리액트 훅으로 입력 처리

사용자의 텍스트 입력을 후크로 처리하는 방법은 여러 가지가 있습니다.후크를 사용하여 입력을 처리하는 더 바람직한 방법 또는 적절한 방법은 무엇입니까?어떤 것을 사용하시겠습니까?

1) 입력 처리에 가장 간단한 후크이지만, 더 많은 필드가 있으며, 더 반복적인 코드를 작성해야 합니다.

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

이벤트:

onChange={event => setPassword(event.target.value)}
onChange={event => setUsername(event.target.value)}

2) 위의 예와 비슷하지만 동적 키 이름을 사용합니다.

const [inputValues, setInputValues] = useState({
  username: '', password: ''
});

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
};

이벤트:

onChange={handleOnChange}

3) 대체 수단useStateReact에서 설명한 바와 같이JS 문서,useReducer보통보다 낫다useState.

const [inputValues, setInputValues] = useReducer(
  (state, newState) => ({ ...state, ...newState }),
  {username: '', password: ''}
);

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ [name]: value });
};

이벤트:

onChange={handleOnChange}

4)useCallback는 의존관계 중 하나가 변경된 경우에만 변경되는 메모 형식의 콜백을 반환합니다.

const [inputValues, setInputValues] = useState({ 
  username: '', password: '' 
});

const handleOnChange = useCallback(event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
});

이벤트:

onChange={handleOnChange}

입력값을 반환하는 재사용 가능한 함수를 쓰는 것은 어떨까요?<input>그 자체:

 function useInput({ type /*...*/ }) {
   const [value, setValue] = useState("");
   const input = <input value={value} onChange={e => setValue(e.target.value)} type={type} />;
   return [value, input];
 }

다음으로 사용할 수 있는 것은 다음과 같이 사용할 수 있습니다.

 const [username, userInput] = useInput({ type: "text" });
 const [password, passwordInput] = useInput({ type: "text" });

 return <>
   {userInput} -> {username} <br />
   {passwordInput} -> {password}
 </>;

현재 사용하고 있는 방법은 다음과 같습니다.

const [inputValue, setInputValue] = React.useState("");

const onChangeHandler = event => {
   setInputValue(event.target.value);
};

<input
   type="text"
   name="name"
   onChange={onChangeHandler}
   value={inputValue}
/>

네, 리액트 훅은 useState()로 처리할 수 있습니다.

import React, {useState} from 'react'

export default () => {
    const [fName, setfName] = useState('');
    const [lName, setlName] = useState('');
    const [phone, setPhone] = useState('');
    const [email, setEmail] = useState('');

const submitValue = () => {
    const frmdetails = {
        'First Name' : fName,
        'Last Name' : lName,
        'Phone' : phone,
        'Email' : email
    }
    console.log(frmdetails);
}

return(
    <>
    <hr/>
    <input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} />
    <input type="text" placeholder="Last Name" onChange={e => setlName(e.target.value)} />
    <input type="text" placeholder="Phone" onChange={e => setPhone(e.target.value)} />
    <input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} />
    <button onClick={submitValue}>Submit</button>
    </>
    )
}

이 작업을 수행하는 방법은 다음과 같습니다(입력 내용이 폼 안에 있어야 합니다).

사용하는 BasicForm 구성 요소가 있습니다.

오브젝트 내의 모든 입력 상태를 단일 useState() 호출에 저장합니다.

통과하다useContext()그inputs와 함께 진술하다onChange()함수와 함수setInputInitialState()입력이 처음 장착될 때 초기 상태를 설정할 수 있습니다.또한 onFocus, onBlur도 전달하고 여기에 나와 있지 않은 필드를 검증하는 기능도 있어 코드를 단순화합니다.

이렇게 하면 다음과 같이 원하는 수의 입력이 포함된 폼을 쉽게 만들 수 있습니다.

<BasicForm
      isSubmitting={props.isSubmitting}
      submitAction={ (formState) =>
        props.doSignIn(formState) }
    >
      <TextInput
        type='email'
        label='Email'
        name='email'
        placeholder='Enter email...'
        required
      />
      <TextInput
        type='password'
        label='Password'
        name='password'
        placeholder='Enter password...'
        min={6}
        max={12}
        required
      />
      <SubmitButton
        label='Login'
      />
    </BasicForm>

Basic Form.js

import FormContext from './Parts/FormContext';

function BasicForm(props) {

  const [inputs, setInputs] = useState({});

  function onChange(event) {
    const newValue = event.target.value;
    const inputName = event.target.name;
    setInputs((prevState)=> {
      return({
        ...prevState,
        [inputName]: {
          ...prevState[inputName],
          value: newValue,
          dirty: true
        }
      });
    });
  }

  function setInputInitialState(
    inputName,
    label='This field ',
    type,
    initialValue = '',
    min = false,
    max = false,
    required = false) {

    const INITIAL_INPUT_STATE = {
      label: label,
      type: type,
      onFocus: false,
      touched: false,
      dirty: false,
      valid: false,
      invalid: false,
      invalidMsg: null,
      value: initialValue,
      min: min,
      max: max,
      required: required
    };

    setInputs((prevState) => {
      if (inputName in prevState) {
        return prevState;
      }
      return({
        ...prevState,
        [inputName]: INITIAL_INPUT_STATE
      });
    });

  }

return(
    <FormContext.Provider value={{
      onChange: onChange,
      inputs: inputs,
      setInputInitialState: setInputInitialState,
    }}>
      <form onSubmit={onSubmit} method='POST' noValidate>
        {props.children}
      </form>
    </FormContext.Provider>
  );
}

TextInput.js

입력에서는useEffect()설치 시 초기 상태를 설정합니다.

function TextInput(props) {

  const formContext = useContext(FormContext);

  useEffect(() => {
    console.log('TextInput useEffect...');
    formContext.setInputInitialState(
      props.name,
      props.label,
      props.type,
      props.initialValue,
      props.min,
      props.max,
      props.required
    );
  },[]);

  return(
      <input
        type={props.type}
        id={props.name}
        name={props.name}
        placeholder={props.placeholder}
        value={([props.name] in formContext.inputs) ?
                  formContext.inputs[props.name].value
                : props.initialValue || ''}
        onChange={formContext.onChange}
        onFocus={formContext.onFocus}
        onBlur={formContext.onBlur}
      >
      </input>
      </div>
      {([props.name] in formContext.inputs) ?
          formContext.inputs[props.name].invalidMsg && <div><span> {formContext.inputs[props.name].invalidMsg}</span></div>
        : null}
    </div>
  );

...
}

function App(){
    const [name, setName] = useState("");
    const [istrue, Setistrue] = useState(false);
    const [lastname,setLastname]=useState("");
    
    function handleclick(){
       Setistrue(true);
    }
    
    return(
        <div>
            {istrue ? <div> <h1>{name} {lastname}</h1> </div> : 
            <div>
                <input type="text" placeholder="firstname" name="name" onChange={e =>setName(e.target.value)}/>
                <input type="text" placeholder="lastname" name="lastname" onChange={e =>setLastname(e.target.value)}/>
               <button  type="submit" onClick={handleclick}>submit</button>
            </div>}
        </div>
    )
    
    }

}

Formik과 같은 양식 라이브러리를 고려하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/55757761/handle-an-input-with-react-hooks