在react js中从一个页面发送到另一个页面的输入值

在React.js中，从一个页面发送到另一个页面的输入值可以通过以下几种方式实现：

1. 使用React Router：React Router是React.js官方推荐的路由库，可以实现页面之间的导航和路由管理。通过React Router，可以在页面之间传递参数和数据。具体实现方式如下：

• 在发送页面（发送输入值的页面）使用Link组件或history.push方法将输入值作为参数传递给目标页面。
• 在目标页面中，使用props对象获取传递过来的参数，然后在页面中使用。

示例代码：

发送页面：

import { Link } from 'react-router-dom';

function SendingPage() {

 const inputValue = 'example value';

 return (

   <Link to={{ pathname: '/target', state: { inputValue } }}>

     Go to Target Page

   </Link>

 );

}

目标页面：

function TargetPage(props) {

 const { inputValue } = props.location.state;

 return <div>{inputValue}</div>;

}

1. 使用状态管理库（如Redux）：状态管理库可以帮助在React.js应用程序中管理全局状态，包括页面之间的数据传递。通过在发送页面将输入值存储在全局状态中，然后在目标页面中获取该值，可以实现从一个页面发送到另一个页面的输入值传递。

示例代码：

发送页面：

import { useDispatch } from 'react-redux';

import { setInputValue } from './actions';

function SendingPage() {

 const dispatch = useDispatch();

 const inputValue = 'example value';

 const handleClick = () => {

   dispatch(setInputValue(inputValue));

 };

 return (

   <button onClick={handleClick}>Go to Target Page</button>

 );

}

目标页面：

import { useSelector } from 'react-redux';

function TargetPage() {

 const inputValue = useSelector(state => state.inputValue);

 return <div>{inputValue}</div>;

}

1. 使用URL参数：可以通过URL参数在页面之间传递输入值。在发送页面将输入值作为URL参数拼接到目标页面的URL中，然后在目标页面中解析URL参数获取输入值。

示例代码：

发送页面：

import { useHistory } from 'react-router-dom';

function SendingPage() {

 const history = useHistory();

 const inputValue = 'example value';

 const handleClick = () => {

   history.push(`/target?inputValue=${inputValue}`);

 };

 return (

   <button onClick={handleClick}>Go to Target Page</button>

 );

}

目标页面：

import { useLocation } from 'react-router-dom';

function TargetPage() {

 const location = useLocation();

 const searchParams = new URLSearchParams(location.search);

 const inputValue = searchParams.get('inputValue');

 return <div>{inputValue}</div>;

}

以上是在React.js中从一个页面发送到另一个页面的输入值的几种实现方式。具体选择哪种方式取决于项目需求和开发团队的偏好。