当前位置：首页 > React

react如何设置input

2026-01-15 10:21:52React

设置 React 中的 Input 元素

在 React 中设置 input 元素可以通过多种方式实现，包括受控组件、非受控组件以及使用第三方库。以下是几种常见的方法：

受控组件方式

受控组件通过 React 的状态管理输入值，确保输入的值始终与 React 的状态同步。

import React, { useState } from 'react';

function ControlledInput() {
  const [inputValue, setInputValue] = useState('');

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

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

非受控组件方式

非受控组件通过 ref 直接访问 DOM 元素的值，适合表单数据量较大或需要直接操作 DOM 的场景。

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

使用第三方库（如 Formik）

Formik 是一个流行的表单管理库，可以简化表单处理和验证。

import React from 'react';
import { useFormik } from 'formik';

function FormikInput() {
  const formik = useFormik({
    initialValues: { inputValue: '' },
    onSubmit: (values) => {
      console.log(values.inputValue);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="text"
        name="inputValue"
        value={formik.values.inputValue}
        onChange={formik.handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

设置默认值和占位符

可以通过 defaultValue 或 placeholder 属性设置默认值和占位符。

<input
  type="text"
  defaultValue="Default Value"
  placeholder="Enter text here"
/>

处理多种输入类型

React 支持多种输入类型，如 text、password、email 等。

<input type="email" placeholder="Enter email" />
<input type="password" placeholder="Enter password" />
<input type="number" placeholder="Enter number" />

添加验证和错误提示

可以通过状态管理或第三方库实现输入验证和错误提示。

const [error, setError] = useState('');

const validateInput = (value) => {
  if (!value) {
    setError('Input is required');
  } else {
    setError('');
  }
};

return (
  <div>
    <input
      type="text"
      onChange={(e) => {
        setInputValue(e.target.value);
        validateInput(e.target.value);
      }}
    />
    {error && <p style={{ color: 'red' }}>{error}</p>}
  </div>
);

react如何设置input