react如何写input框

基础Input框实现

在React中创建基础Input框，使用<input>标签并绑定状态管理。通过useState钩子存储输入值，onChange事件更新状态。

import React, { useState } from 'react';

function BasicInput() {
  const [value, setValue] = useState('');

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

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="请输入内容"
    />
  );
}

受控组件与表单提交

将Input框整合到表单中，通过onSubmit事件处理提交逻辑。确保表单数据通过状态管理。

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交的值:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">提交</button>
    </form>
  );
}

输入验证与反馈

添加实时验证逻辑，例如限制输入长度或格式，并通过条件渲染显示错误信息。

function ValidatedInput() {
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    if (newValue.length > 10) {
      setError('输入不能超过10个字符');
    } else {
      setError('');
    }
  };

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

样式与第三方库集成

使用CSS模块或第三方库（如styled-components）美化Input框，或集成UI库（如Material-UI）。

import { TextField } from '@mui/material';

function StyledInput() {
  const [value, setValue] = useState('');

  return (
    <TextField
      label="带样式的输入框"
      variant="outlined"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

高级功能：防抖与自动完成

通过防抖（Debounce）优化频繁输入场景，或实现自动完成功能（结合API请求）。

import { debounce } from 'lodash';

function DebouncedInput() {
  const [value, setValue] = useState('');

  const handleSearch = debounce((searchTerm) => {
    console.log('搜索:', searchTerm);
  }, 500);

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    handleSearch(newValue);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="输入搜索内容"
    />
  );
}