React组件开发：按钮触发后传递输入框值至用户名生成函数

我来分两部分帮你搞定这两个问题：

这里我举两个常用编程语言的实现示例，你可以按需参考：

Python 实现 #

直接用内置的 input() 函数获取用户输入，再用 + 运算符完成拼接即可：

# 读取两个输入字符串
str1 = input("请输入第一个字符串：")
str2 = input("请输入第二个字符串：")

# 拼接并输出结果
result = str1 + str2
print("拼接后的结果：", result)

JavaScript 浏览器端实现 #

如果是在浏览器环境，有两种常见方式：

方式1：用 prompt 弹窗快速获取输入 #

// 读取输入
const str1 = prompt("请输入第一个字符串");
const str2 = prompt("请输入第二个字符串");

// 拼接并展示结果
const result = str1 + str2;
alert("拼接后的结果：" + result);

方式2：操作DOM输入框（适合页面内交互） #

假设页面已有对应的输入框和按钮：

<input type="text" id="input1" placeholder="输入第一个字符串">
<input type="text" id="input2" placeholder="输入第二个字符串">
<button onclick="concatStrings()">拼接</button>
<div id="result"></div>

<script>
function concatStrings() {
  // 获取输入框的值
  const str1 = document.getElementById('input1').value;
  const str2 = document.getElementById('input2').value;
  // 拼接并显示结果
  document.getElementById('result').textContent = "拼接后的结果：" + str1 + str2;
}
</script>

在React开发里，有两种主流方案，我都给你演示清楚：

方式1：受控组件（推荐） #

受控组件是让React的state来管理输入框的值，输入变化时同步更新state，按钮点击时直接从state里取数据，这种方式能更好地把控表单的状态：

import { useState } from 'react';

function UsernameGenerator() {
  // 用state管理名字和姓氏的输入值
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  // 处理输入框内容变化
  const handleFirstNameChange = (e) => {
    setFirstName(e.target.value);
  };

  const handleLastNameChange = (e) => {
    setLastName(e.target.value);
  };

  // 按钮点击的核心处理函数
  const handleGenerateUsername = () => {
    // 直接从state获取输入值
    console.log('输入的名字：', firstName, '姓氏：', lastName);
    // 生成随机用户名的逻辑示例
    const randomNum = Math.floor(Math.random() * 1000);
    const username = `${firstName.toLowerCase()}${lastName.toLowerCase()}${randomNum}`;
    alert('生成的用户名：' + username);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="请输入名字"
        value={firstName}
        onChange={handleFirstNameChange}
      />
      <input
        type="text"
        placeholder="请输入姓氏"
        value={lastName}
        onChange={handleLastNameChange}
      />
      <button onClick={handleGenerateUsername}>生成用户名</button>
    </div>
  );
}

export default UsernameGenerator;

方式2：非受控组件（适合简单场景） #

如果不想用state管理状态，也可以用useRef直接关联输入框DOM元素，点击按钮时读取它的value：

import { useRef } from 'react';

function UsernameGenerator() {
  // 创建ref关联输入框
  const firstNameRef = useRef(null);
  const lastNameRef = useRef(null);

  const handleGenerateUsername = () => {
    // 通过ref获取输入框的值
    const firstName = firstNameRef.current.value;
    const lastName = lastNameRef.current.value;
    console.log('输入的名字：', firstName, '姓氏：', lastName);
    // 生成用户名逻辑示例
    const randomNum = Math.floor(Math.random() * 1000);
    const username = `${firstName.toLowerCase()}${lastName.toLowerCase()}${randomNum}`;
    alert('生成的用户名：' + username);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="请输入名字"
        ref={firstNameRef}
      />
      <input
        type="text"
        placeholder="请输入姓氏"
        ref={lastNameRef}
      />
      <button onClick={handleGenerateUsername}>生成用户名</button>
    </div>
  );
}

export default UsernameGenerator;

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