在 React for Web 应用程序中处理具有单一状态的表单

Question

我有一个想法，可以根据自己的需要创建简单的 Web 应用程序。我希望用户能够使用选择列表来定义所需的表单字段数（例如 1 - 10）。 Picklist 将创建选定数量的带有文本输入的组件。用户可以在文本输入中键入字符串，所有数据都将存储为单一状态。我可以简单地说 string1、string2 并具有 10 个状态，但我想知道这是否可以作为单一状态来实现，因为我希望所有文本输入都以令牌的形式创建单个字符串。

示例：用户选择 3 个文本输入：

嗨
你好
再见

这将形成 {hi/hello/goodbye} 的令牌。

请告诉我如何使用 React 处理该问题。

谢谢。

Answer 1

也许您可以使用您所在州内的对象数组来解决这个问题，然后再评估这些值。我不确定你想做什么，但如果你想创建一个动态生成输入并在相应状态设置值后的应用程序，你可以这样做。


export default function DinamicLinks() {
  const [quantity, setQuantity] = useState(0)
  const [messages, setMessages] = useState([])

  const createInputs = (quantity) => {
    const params = []

    for (let i = 1; i <= quantity; i++){
      let param = {name:i};
      params.push(param)
    }

    return params
  }

  const handleMessages = (passedMessage) => {
    const filteredMessages = messages.filter((message) => message.name !== passedMessage.name)
    setMessages([...filteredMessages, passedMessage])
  }

  return (
    <div className="App">
       <button onClick={() => setQuantity(quantity + 1)}>More inputs</button>
       <button onClick={() => setQuantity(quantity - 1)}>Less inputs</button>
       {createInputs(quantity).map(({name}) => <input key={name} onChange={(e) => handleMessages({name, message:e.currentTarget.value})}></input>)}
       <button onClick={() => console.log(messages)}>See messages</button>
    </div>
  );
}

此代码将动态生成输入并将其值存储在一个状态中，该状态将对象存储在数组中，稍后您可以实现逻辑以按照您想要的方式处理文本。顺便说一句，这段代码在性能上并不是最好的，但我想快速为您提供简单的解决方案。毫无疑问，有更好的方法可以做到这一点，而且值得一提的是，不要像我在这个例子中那样滥用箭头函数，这是在 React 中遇到性能问题的简单方法。

在 React for Web 应用程序中处理具有单一状态的表单

Handling form with single state in React for web app

state

reactjs