时间戳

首页 > 解决方案 > 如何将子组件中的表单中的数字添加到父组件中的数字数组中

reactjs - 如何将子组件中的表单中的数字添加到父组件中的数字数组中

问题描述

我正在尝试将子组件（AddNum.js）中的文本字段中的值添加到父组件（App.js）中的数字数组中。

为此，我在父组件中创建了一个 usestate 钩子“setValuesList”：

const [valuesList, setValuesList] = useState([]);

然后我像这样将钩子传递给子组件：

<AddNum valuesList={valuesList} setValuesList={setValuesList} />

我的子组件如下所示：

import React, { useState } from 'react';

const AddNum = ({ valuesList, setValuesList }) => {
  const [value, setValue] = useState('');

  const addNumber = (value) => {
    const number = parseInt(value);
    setValuesList([...valuesList, number]);
  };

  return (
    <form onSubmit={addNumber}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      ></input>
      <button>Add Number</button>
    </form>
  );
};

export default AddNum;

但是，当我在父组件中控制台记录“valuesList”并通过表单添加一个数字时，我得到一个空数组：

[]

有谁知道我做错了什么，我该如何解决这个问题？

我的存储库位于：

https://github.com/acandael/add-to-list

感谢您的帮助，

安东尼

标签： reactjsreact-hooks

解决方案

onSubmit处理程序的第一个参数将event. addNumber作为提交处理程序传递给表单的函数的当前实现是完全不正确的。

解决方案创建一个新的提交处理函数并阻止默认的表单提交行为调用event.preventDefault()，然后执行所有添加数字逻辑。

const AddNum = ({ valuesList, setValuesList }) => {
  const [value, setValue] = useState('');

  const addNumber = (value) => {
    const number = parseInt(value, 10);
    setValuesList(prev => [...prev, number]);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    addNumber(value)
  }

  return (
    <form onSubmit={submitHandler}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      ></input>
      <button>Add Number</button>
    </form>
  );
};

Codesandbox中的工作演示

推荐阅读