React：动态添加输入文本

Question

我是 React 新手，尝试在单击“添加项目符号”按钮时添加输入字段（类似于 ToDo 列表功能）。

我的组件是：

  return (
    <Container>
            {bullet.map((text, i) => {
            return (
              <div className="box">
                <p>Bullet {i+1}</p>
                  <input
                    name="Bullet" placeholder="Enter text"
                    value={text} onChange={(event) => {
                      setBullet([event.target.value])
                    }}/>
                    <button onClick={handleAddClick}>Add Bullet</button>
              </div>
            );
            })}

    </Container>
  );
};

问题是函数 handleAddClick 被调用（通过 console.log 检查）但它没有添加新的输入法。我正在使用状态数组进行更新，所以如果有人可以帮助我解决问题，这将很有帮助。

处理添加点击：

const handleAddClick = useCallback(() => {
    setBullet([
      ...bullet, 
      'Lorem Ipsum is simply dummy text'
    ])
  }, [ bullet ]);

更新： 现在修改函数后的问题是，每当我开始在输入框中输入时，它会立即删除所有其他输入框，只保留一个。我将 event.target.value 的值传递给 onChange 函数。

Answer 1

您应该将回调处理程序包装在 useCallback() 中以记住它。目前，每次渲染组件时都会定义您的函数，因此 bullet 的参考值使用的是初始值，而不是更新后的值：

const handleAddClick = useCallback(() => {
  setBullet([
    ...bullet, 
    'Lorem Ipsum is simply dummy text'
  ])
}, [ bullet ]);

Answer 2

我相信您原来的 handleAddClick 处理程序只需要使用功能状态更新来正确更新以前的状态，而不是范围内关闭的任何状态。

const handleAddClick = () => {
  setBullet(bullets => [
    ...bullets,
    'Lorem Ipsum is simply dummy text'
  ]);
};

为了解决更新问题，您将完全替换输入的 onChange 处理程序中的 bullet 状态。

<input
  name="Bullet"
  placeholder="Enter text"
  value={text}
  onChange={(event) => {
    setBullet([event.target.value]) // <-- replaceS the entire array!!
  }}
/>

您需要的是一个处理程序，例如更新特定索引的删除处理程序。

const onChangeHandler = (index: number, value: string) => {
  setBullet(bullets => bullets.map(
    (bullet, i) => i === index ? value : bullet
  )):
}

...

<input
  name="Bullet"
  placeholder="Enter text"
  value={text}
  onChange={e => onChangeHandler(i, e.target.value)}
/>

React：动态添加输入文本

React: Dynamically adding an input text

javascript

reactjs

react-hooks

use-state

destructuring