日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

React特征學習Form數(shù)據(jù)管理示例詳解_React

作者：Flag還是要立的 ? 更新時間： 2022-11-09 編程語言

Form數(shù)據(jù)管理

有時會遇到多個位置需要用戶輸入的情況，若每個狀態(tài)都配置state或handler會很繁瑣，可以嘗試下面的方法

import * as React from 'react';
const LoginForm = () => {
  // 將多個狀態(tài)合并為對象
  const [state, setState] = React.useState({
    email: '',
    password: '',
  });
  // 通過單個handler統(tǒng)一管理
  const handleChange = (e) => {
    setState({
      ...state,
      [e.target.id]: e.target.value,
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(state.email + ' ' + state.password);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

重置Form狀態(tài)

由于每次用戶輸入后都需要數(shù)據(jù)重置回初始狀態(tài)，可以使用以下方法來預設(shè)初始值，并重置Form內(nèi)容，方便新用戶的再次輸入

import * as React from 'react';
const LoginForm = () => {
  // 初始
  const [state, setState] = React.useState({
    // 設(shè)置初始值
    email: '123@456.com',
    password: '12345',
  });
  const handleChange = (e) => {
    setState({
      ...state,
      [e.target.id]: e.target.value,
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    // 在這里重置狀態(tài)
    setState({
      email: '',
      password: '',
    });
    alert(state.email + ' ' + state.password);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

屏幕顯示如下，submit后 Form內(nèi)容會被重置

也可以考慮設(shè)置一個變量來統(tǒng)一管理初始值，方便對狀態(tài)的查找和維護

import * as React from 'react';
const LoginForm = () => {
  // 定義初始值
  const INITIAL_STATE = {
    email: '',
    password: '',
  };
  const [state, setState] = React.useState(INITIAL_STATE);
  const handleChange = (e) => {
    setState({
      ...state,
      [e.target.id]: e.target.value,
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    // 重置初始值
    setState(INITIAL_STATE);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

form驗證

驗證Form的輸入是不可或缺的流程，可參考以下方案

import * as React from 'react';
const LoginForm = () => {
  const INITIAL_STATE = {
    email: '',
    password: '',
  };
  // 設(shè)置Validation要求
  const VALIDATION = {
    email: [
      {
        isValid: (value) => !!value,
        message: 'Is required.',
      },
      {
        isValid: (value) => /\S+@\S+\.\S+/.test(value),
        message: 'Needs to be an email.',
      },
    ],
    password: [
      {
        isValid: (value) => !!value,
        message: 'Is required.',
      },
    ],
  };
  // 獲取ErrorsFields
  const getErrorState = (state) =>
    Object.keys(state).reduce((acc, key) => {
      if (!VALIDATION[key]) return acc;
      const errorsPerField = VALIDATION[key].map((validation) => ({
          isValid: validation.isValid(state[key]),
          message: validation.message,
        })).filter((errorPerField) => !errorPerField.isValid);
      return { ...acc, [key]: errorsPerField };
    }, {});
  const [state, setState] = React.useState(INITIAL_STATE);
  // 設(shè)置錯誤信息變量
  const errorState = getErrorState(state);
  console.log(errorState);
  const handleChange = (e) => {
    setState({
      ...state,
      [e.target.id]: e.target.value,
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    // 獲取錯誤反饋
    const hasErrors = Object.values(errorFields).flat().length > 0;
    if (hasErrors) return;
    setState(INITIAL_STATE);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
         {/* 顯示email錯誤 */}
        {errorState.email?.length ? (
          <span style={{ color: 'red' }}>
            {errorState.email[0].message}
          </span>
        ) : null}
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
        {/* 顯示password錯誤 */}
        {errorState.password?.length ? (
          <span style={{ color: 'red' }}>
            {errorState.password[0].message}
          </span>
        ) : null}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

效果顯示如下

小結(jié)

原文鏈接：https://juejin.cn/post/7143801145952043044

欄目分類
最近更新