在React中将多个<input/>集中到一个字符串中

在React中将多个<input/>集中到一个字符串中，可以通过使用状态管理来实现。以下是一个示例代码：

import React, { useState } from 'react';

function InputString() {
  const [inputValues, setInputValues] = useState({
    input1: '',
    input2: '',
    input3: ''
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setInputValues(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { input1, input2, input3 } = inputValues;
    const combinedString = input1 + input2 + input3;
    console.log(combinedString);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="input1"
        value={inputValues.input1}
        onChange={handleInputChange}
      />
      <input
        type="text"
        name="input2"
        value={inputValues.input2}
        onChange={handleInputChange}
      />
      <input
        type="text"
        name="input3"
        value={inputValues.input3}
        onChange={handleInputChange}
      />
      <button type="submit">Combine</button>
    </form>
  );
}

export default InputString;

在上述代码中，我们使用了React的useState钩子来创建一个名为inputValues的状态，它是一个包含三个输入框的对象。每个输入框都有一个对应的name属性，并且通过onChange事件监听输入框的变化，将输入框的值更新到inputValues状态中。

在handleSubmit函数中，我们通过解构赋值从inputValues中获取每个输入框的值，并将它们拼接成一个字符串combinedString。你可以根据实际需求对字符串进行进一步处理或使用。

这是一个简单的示例，你可以根据自己的需求进行扩展和优化。如果你想了解更多关于React的相关知识，可以参考腾讯云的React产品介绍：React产品介绍。