React+TypeScript：如何用useRef/useState拼接输入与选择器值？

我有2个Input组件和1个Select组件，需要将它们的值拼接起来，确保输入框或选择器的值变化时，拼接后的字符串能实时更新。但目前我的代码里拼接值会被覆盖而不是正确更新，我是React新手，求解决办法。

我的示例代码：

import Input from '../../components/Input'
const CustomAddressLayout: React.FC<IAddressLayoutProps> = ({ theme, states }) => {
var [inputValue, setInputValue] = useState("");
const handleChange = (e: any) => {
  inputValue = inputValue +" "+setInputValue(e);
    console.log("target", e);
  }
  return (
    <>
          <Accordion varient={'grouped'} expanded theme={theme}
          items={[
            {
              content:
              <>
              <Input label='Address Line 1' fullWidth={true} type={''} startAdornment={""} endAdornment={""}
                  onChange={(e) => handleChange(e)} id={''} theme={theme} dynamic={false} />
              <Input label='Address Line 2' fullWidth={true} type={''} startAdornment={""} endAdornment={""}
                  onChange={(e) => handleChange(e)} id={''} theme={theme} dynamic={false} />
              <Select label='State' theme={theme} items={states} sxProps={{ m: 2, width: 100 }}
                  onChange={(e) => handleChange(e)}></Select>
              </>,
              isExpanded: true,
              key: "string",
              subtitle: inputValue, ////// 这里应该显示拼接后的值，但现在会覆盖之前的输入值
              title: "Mailing Address",
              actionBtn: <></>
            }
           ]}
          />   
       
    </>
  )
}
export default CustomAddressLayout

你的核心问题是错误地用单个状态直接拼接所有输入值，同时还直接修改了状态变量（React中禁止这么做），导致状态更新逻辑完全混乱。下面是具体的修复步骤：

1. 给每个输入项单独维护状态 #

不要用单个inputValue存拼接结果，而是给地址1、地址2、州分别设置独立状态：

const [address1, setAddress1] = useState("");
const [address2, setAddress2] = useState("");
const [state, setState] = useState("");

2. 给每个组件绑定对应的 onChange 事件 #

每个输入组件的变化要更新各自的状态，避免共用同一个处理函数导致值混淆：

// 地址1的Input
<Input 
  label='Address Line 1' 
  fullWidth={true} 
  // 注意：如果你的自定义Input返回的是DOM事件，就用e.target.value；如果直接返回输入值，就用setAddress1(e)
  onChange={(e) => setAddress1(e)} 
  // 其他props保持不变
/>

// 地址2的Input
<Input 
  label='Address Line 2' 
  fullWidth={true} 
  onChange={(e) => setAddress2(e)}
  // 其他props保持不变
/>

// 州的Select
<Select 
  label='State' 
  items={states} 
  // Select通常直接返回选中的值，根据组件实际返回调整
  onChange={(selectedValue) => setState(selectedValue)}
  // 其他props保持不变
/>

3. 实时计算拼接后的字符串 #

不需要单独存拼接结果的状态，直接在渲染时通过现有状态计算，这样任何一个输入值变化都会自动更新拼接结果：

subtitle: `${address1} ${address2} ${state}`.trim()

用trim()可以避免开头/结尾出现多余空格，你也可以根据需求调整分隔符（比如改成${address1}, ${address2}, ${state}）。

4. 完整修复后的代码 #

import Input from '../../components/Input'
import { useState } from 'react';

const CustomAddressLayout: React.FC<IAddressLayoutProps> = ({ theme, states }) => {
  // 分别维护每个输入项的状态
  const [address1, setAddress1] = useState("");
  const [address2, setAddress2] = useState("");
  const [state, setState] = useState("");

  return (
    <>
      <Accordion varient={'grouped'} expanded theme={theme}
        items={[
          {
            content: (
              <>
                <Input 
                  label='Address Line 1' 
                  fullWidth={true} 
                  type={''} 
                  startAdornment={""} 
                  endAdornment={""}
                  onChange={(e) => setAddress1(e)} 
                  id={''} 
                  theme={theme} 
                  dynamic={false} 
                />
                <Input 
                  label='Address Line 2' 
                  fullWidth={true} 
                  type={''} 
                  startAdornment={""} 
                  endAdornment={""}
                  onChange={(e) => setAddress2(e)}
                  id={''} 
                  theme={theme} 
                  dynamic={false} 
                />
                <Select 
                  label='State' 
                  theme={theme} 
                  items={states} 
                  sxProps={{ m: 2, width: 100 }}
                  onChange={(selected) => setState(selected)}
                ></Select>
              </>
            ),
            isExpanded: true,
            key: "string",
            // 实时计算拼接结果
            subtitle: `${address1} ${address2} ${state}`.trim(),
            title: "Mailing Address",
            actionBtn: <></>
          }
        ]}
      />   
    </>
  )
}
export default CustomAddressLayout

关键注意点 #

• React状态更新是异步的，绝对不能直接修改状态变量（比如inputValue = ...），必须用setState系列函数更新。
• 每个输入项单独维护状态，能清晰追踪每个值的变化，避免逻辑混乱。
• 像拼接字符串这种"派生状态"，不需要单独存状态，直接通过现有状态计算即可，既简洁又能保证实时更新。

内容的提问来源于stack exchange，提问作者kah