点击按钮后如何将用户输入值传递至另一页面展示？组件传值咨询

1. 要传递的内容 #

就是用户在Page1输入的折扣值，建议先做基础校验（比如是否为0-100之间的数字），传递校验后的有效值，避免无效数据进入后续流程。

2. 具体传递实现（以React为例） #

父组件侧：维护状态+提供回调 #

父组件需要存储折扣值的状态，同时给Page1传一个回调函数用来接收值，还要控制页面切换：

import { useState } from 'react';
import Page1 from './Page1';
import Page2 from './Page2';

function Parent() {
  const [discount, setDiscount] = useState('');
  const [isOnPage2, setIsOnPage2] = useState(false);

  // 接收Page1传过来的折扣值
  const getDiscountFromPage1 = (validValue) => {
    setDiscount(validValue);
    // 跳转到Page2
    setIsOnPage2(true);
  };

  return (
    <div>
      {isOnPage2 ? <Page2 discount={discount} /> : <Page1 sendDiscount={getDiscountFromPage1} />}
    </div>
  );
}

export default Parent;

Page1侧：获取输入+调用回调传值 #

在Page1里拿到用户输入的内容，点击结账按钮时调用父组件给的回调，把校验后的折扣值传回去：

import { useState } from 'react';

function Page1({ sendDiscount }) {
  const [inputVal, setInputVal] = useState('');

  const handleCheckout = () => {
    const num = parseFloat(inputVal);
    // 简单校验：必须是0-100之间的有效数字
    if (!isNaN(num) && num >= 0 && num <= 100) {
      sendDiscount(num);
    } else {
      alert('请输入0-100之间的有效折扣值');
    }
  };

  return (
    <div>
      <input
        type="number"
        value={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        placeholder="输入折扣值"
        min="0"
        max="100"
      />
      <button onClick={handleCheckout}>结账</button>
    </div>
  );
}

export default Page1;

Page2侧：接收值并展示 #

父组件把存好的折扣值传给Page2，直接渲染就行：

function Page2({ discount }) {
  return (
    <div>
      <h2>已跳转至结账页</h2>
      <p>您设置的折扣：<strong>{discount}%</strong></p>
    </div>
  );
}

export default Page2;

Vue项目的实现思路 #

如果用Vue，逻辑大同小异：

• 父组件通过自定义事件接收Page1的折扣值
• Page1里点击结账时，用this.$emit('事件名', 折扣值)把值传给父组件
• 父组件把值传给Page2，Page2直接展示

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