web-dev-qa-db-ja.com

Reactフックで入力を処理する

ユーザーのテキスト入力をフックで処理するにはいくつかの方法があることがわかりました。フックで入力を処理するためのより好ましいまたは適切な方法は何ですか？どちらを使いますか？

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）useStateの代替手段であり、ReactJSのドキュメントで述べたように、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は、依存関係の1つが変更された場合にのみ変更されるコールバックのメモされたバージョンを返します。

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

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

イベント：

onChange={handleOnChange}
reactjsreact-hooks
30
ligowsky

ここに私がそれをする方法があります（あなたの入力がフォームの中になければならないと仮定します）：

私が使用しているBasicFormコンポーネントがあります。

すべての入力状態を1つの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>
_

BasicForm.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

Inputseは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>
  );

...
}
_
0
cbdeveloper
function App2(){
    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>
    )

function App2(){
    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>
    )

    }

}
0
user12857235

これは私が今使っている方法です：

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

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

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