React项目点击Next按钮如何传递多选下拉选中值并在下页多行文本区展示

1. 先修正App.js路由拼写错误 #

原路由配置中Nomination Details多了空格，会导致组件加载失败，修正后代码如下：

// App.js
function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path='/' component={Login} />
          <Route path='/nominate/:token' component={Nominate} />
          <Route path='/nominatePerson' component={NominatePerson} />
          {/* 移除组件名中间的空格 */}
          <Route path='/nominationdetails' component={NominationDetails} />
          <Route path='/errorPage/' component={ErrorPage} />
          <Route path='*' component={PageNotFound} />
        </Switch>
      </div>
    </Router>
  );
}

2. 修改NominatePerson组件实现值传递 #

新增多选值状态监听，点击Next时通过react-router自带的路由状态传参，不需要额外引入状态管理工具：

import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import Multiselect from 'multiselect-react-dropdown';

const options = [
  { key: 'Axe', id: 1 },
  { key: 'Bags', id: 2 },
  { key: 'Coat', id: 3 },
  { key: 'Drum', id: 4 },
];

const NominatePerson = () => {
  const history = useHistory();
  // 存储多选框选中的所有项
  const [selectedOptions, setSelectedOptions] = useState([]);

  // 选中/取消选中时更新状态
  const handleSelectChange = (selectedList) => {
    setSelectedOptions(selectedList);
  };

  // 点击Next跳转时携带选中值
  const goToDetailPage = () => {
    history.push({
      pathname: '/nominationdetails',
      state: { selectedNominees: selectedOptions }
    });
  };

  return (
    <div className="App">
      <div className="navbar-nav">
        <div className="leftNavItem">
          <a>
            <Link to={'/dashboard'} className="nav-link">
              {' '}
              <b>Dashboard</b>{' '}
            </Link>
          </a>
        </div>
      </div>
      <h1>Nominate Person</h1>
      <div className="nomineeSelectBox">
        <Multiselect 
          options={options} 
          displayValue="key" 
          showCheckbox={true} 
          onSelect={handleSelectChange}
          onRemove={handleSelectChange}
        />
      </div>
      <div className="nominateButton">
        <input type="button" value="Next" onClick={goToDetailPage} />
      </div>
    </div>
  );
};

export default NominatePerson;

3. 修改NominationDetails组件渲染对应输入框 #

通过useLocation获取路由传递的选中值，遍历数组渲染每个选项对应的文本输入框即可：

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

const NominationDetails = () => {
  const location = useLocation();
  // 兜底为空数组避免无参数时渲染报错
  const selectedNominees = location.state?.selectedNominees || [];

  return (
    <div className="App">
      <h1>提名详情</h1>
      {selectedNominees.map(nominee => (
        <div key={nominee.id} style={{ margin: '20px 0' }}>
          <h4>{nominee.key}</h4>
          {/* 每个选中项对应一个多行文本输入框 */}
          <textarea 
            placeholder={`请填写${nominee.key}的相关说明`} 
            rows={4} 
            style={{ width: '100%', marginTop: '8px' }}
          />
        </div>
      ))}
    </div>
  );
};

export default NominationDetails;

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