Reactjs 按Enter键并清除输入字段时在列表中添加项目

当我在输入字段中键入某些内容并按键盘上的Enter键时，我希望自动将该项添加到列表中，一旦添加，我也希望清除输入字段。我想我应该在按Enter键时使用useRef，但不确定如何使用它

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

const initialList = [
  {
    id: "a",
    name: "Robin",
  },
  {
    id: "b",
    name: "Dennis",
  },
];

const AppAddItem = () => {
  const [list, setList] = useState(initialList);
    const [name, setname] = useState("");

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

  const handleAdd = () => {
    const newList = list.concat({ name, id: uuidv4() });
    setList(newList);
    setname("");
  };

  return (
    <div>
      <AddItem name={name} onChange={handleChange} onAdd={handleAdd} />
      <List list={list} />
    </div>
  );
};

const AddItem = ({ onChange, name, onAdd }) => {
  return (
    <div>
      <div>
        <input type="text" value={name} onChange={onChange} />
        <button type="button" onClick={onAdd}>
          Add
        </button>
      </div>
    </div>
  );
};

const List = ({ list }) => {
  return (
    <form>
      {list.map((item) => {
        return <li key={item.id}>{item.name}</li>;
      })}
    </form>
  );
};

export default AppAddItem;

import React，{useState}来自“React”；
从“uuid”导入{v4 as uuidv4}；
常量初始值列表=[
{
id:“a”，
姓名：“罗宾”，
},
{
id:“b”，
姓名：“丹尼斯”，
},
];
常量AppAddItem=（）=>{
const[list，setList]=useState（initialList）；
const[name，setname]=useState（“”）；
常量handleChange=（事件）=>{
setname（event.target.value）；
};
常数handleAdd=（）=>{
const newList=list.concat（{name，id:uuidv4（）}）；
设置列表（newList）；
集合名（“”）；
};
返回(
);
};
常量AddItem=（{onChange，name，onAdd}）=>{
返回(
添加
);
};
常量列表=（{List}）=>{
返回(
{list.map（（项）=>{
返回
{item.name}
；
})}
);
};
导出默认AppAddItem；

在

上存在

onKeyDown

事件。我们可以通过

事件将我们的函数传递到其中。按键

可以检查是否按下了Enter。如果按下，则只需执行与在

handleAdd

中执行的相同操作

import React，{useState}来自“React”；
从“uuid”导入{v4 as uuidv4}；
常量初始值列表=[
{
id:“a”，
名字：“罗宾”
},
{
id:“b”，
姓名：“丹尼斯”
}
];
常量AppAddItem=（）=>{
const[list，setList]=useState（initialList）；
const[name，setname]=useState（“”）；
常量handleChange=（事件）=>{
setname（event.target.value）；
};
常量handleKeyDown=（事件）=>{
如果（event.key==“输入”）{
手感d（）；
}
};
常数handleAdd=（）=>{
const newList=list.concat（{name，id:uuidv4（）}）；
设置列表（newList）；
集合名（“”）；
};
返回(
);
};
常量AddItem=（{onChange，name，onAdd，handleKeyDown}）=>{
返回(
添加
);
};
常量列表=（{List}）=>{
返回(
{list.map（（项）=>{
返回
{item.name}
；
})}
);
};
导出默认AppAddItem；

您可能希望使用onKeyDown而不是onChange来处理输入。这里有一个关于使用“回车”键的很好的解释：

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

const initialList = [
  {
    id: "a",
    name: "Robin"
  },
  {
    id: "b",
    name: "Dennis"
  }
];

const AppAddItem = () => {
  const [list, setList] = useState(initialList);
  const [name, setname] = useState("");

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

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      handleAdd();
    }
  };

  const handleAdd = () => {
    const newList = list.concat({ name, id: uuidv4() });
    setList(newList);
    setname("");
  };

  return (
    <div>
      <AddItem
        name={name}
        onChange={handleChange}
        onAdd={handleAdd}
        handleKeyDown={handleKeyDown}
      />
      <List list={list} />
    </div>
  );
};

const AddItem = ({ onChange, name, onAdd, handleKeyDown }) => {
  return (
    <div>
      <div>
        <input
          type="text"
          value={name}
          onChange={onChange}
          onKeyDown={handleKeyDown}
        />
        <button type="button" onClick={onAdd}>
          Add
        </button>
      </div>
    </div>
  );
};

const List = ({ list }) => {
  return (
    <form>
      {list.map((item) => {
        return <li key={item.id}>{item.name}</li>;
      })}
    </form>
  );
};

export default AppAddItem;