当前位置：首页 > React

react实现新增按钮

2026-01-26 21:02:11React

实现新增按钮的基本方法

在React中创建一个新增按钮通常需要结合状态管理和事件处理。以下是一个基础实现示例：

import React, { useState } from 'react';

function AddButton() {
  const [items, setItems] = useState([]);

  const handleAdd = () => {
    const newItem = `Item ${items.length + 1}`;
    setItems([...items, newItem]);
  };

  return (
    <div>
      <button onClick={handleAdd}>新增</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

带表单的新增功能

当需要用户输入内容时，可以结合表单实现：

function AddItemForm() {
  const [inputValue, setInputValue] = useState('');
  const [items, setItems] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      setItems([...items, inputValue]);
      setInputValue('');
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button type="submit">新增</button>
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

使用自定义Hook封装逻辑

对于复杂场景，可以将新增逻辑封装为自定义Hook：

function useAddItems(initialItems = []) {
  const [items, setItems] = useState(initialItems);

  const addItem = (item) => {
    setItems([...items, item]);
  };

  return [items, addItem];
}

function AddButtonComponent() {
  const [items, addItem] = useAddItems();
  const [input, setInput] = useState('');

  const handleAdd = () => {
    addItem(input);
    setInput('');
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={handleAdd}>新增</button>
    </div>
  );
}

带验证的新增功能

添加输入验证确保数据有效性：

function ValidatedAddForm() {
  const [text, setText] = useState('');
  const [error, setError] = useState('');
  const [list, setList] = useState([]);

  const validate = (value) => {
    if (!value.trim()) return '内容不能为空';
    if (value.length > 20) return '内容过长';
    return '';
  };

  const handleAdd = () => {
    const validationError = validate(text);
    if (validationError) {
      setError(validationError);
      return;
    }

    setList([...list, text]);
    setText('');
    setError('');
  };

  return (
    <div>
      <input
        value={text}
        onChange={(e) => {
          setText(e.target.value);
          setError(validate(e.target.value));
        }}
      />
      {error && <div style={{color: 'red'}}>{error}</div>}
      <button onClick={handleAdd} disabled={!!error}>
        新增
      </button>
    </div>
  );
}

使用Context管理全局状态

当需要在多个组件间共享新增功能时：

const ItemsContext = React.createContext();

function ItemsProvider({children}) {
  const [items, setItems] = useState([]);

  const addItem = (item) => {
    setItems([...items, item]);
  };

  return (
    <ItemsContext.Provider value={{items, addItem}}>
      {children}
    </ItemsContext.Provider>
  );
}

function AddButton() {
  const {addItem} = useContext(ItemsContext);
  const [input, setInput] = useState('');

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={() => {
        addItem(input);
        setInput('');
      }}>
        新增
      </button>
    </div>
  );
}

function App() {
  return (
    <ItemsProvider>
      <AddButton />
      {/* 其他组件 */}
    </ItemsProvider>
  );
}

以上示例涵盖了从基础到进阶的新增按钮实现方式，可根据实际需求选择适合的方案。

react实现新增按钮