reactjs - 我们如何根据反应钩子中的复选框选择显示多个文本区域？

Question

在我react hooks的基于复选框选择的 web 应用程序中，应该能够显示输入文本区域。如果用户选择了两个复选框，则右侧框应显示两个带有复选框项目名称的文本区域。用户最多只能选择 3 个复选框项目。现在它只显示单个文本区域。

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

const options = [
    { key: 'Aaron', id: 1},
    { key: 'Bader', id: 2},
    { key: 'Crots', id: 3},
    { key: 'Dan', id: 4},
    { key: 'Elep', id: 5},
    { key: 'Pal', id: 6},
    { key: 'Quilt', id: 7}
  ];

const NominatePerson = () => {

    const maxOptions = 3;
    const [selectedOption, setSelectedOption] = useState([]);

    const handleTypeSelect = (e) => {
        const copy = [...selectedOption];
        copy.push(e);
        setSelectedOption(copy);
    };

    const handleTypeRemove = (e) => {
        const copy = [...selectedOption];
        let index = copy.indexOf(e);
        copy.splice(index, 1);
        setSelectedOption(copy);
    };

    const onNominate = () => {
        alert("hello")
        // ...
    };

  
    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 a person</h1>
            <div className="nomineeSelectBox">
                <Multiselect
                    onSelect={handleTypeSelect}
                    onRemove={handleTypeRemove}
                    options={selectedOption.length + 1 === maxOptions ? [] : options}
                    displayValue="key"
                    showCheckbox={true}
                    emptyRecordMsg={"Maximum nominees selected !"}
                />
            </div>
            <div className="nomineesSelectedList">
                {selectedOption.length ? (
                    <input type="textarea" className="nomineechoosed"></input>
                ) : (<div></div>)
                }
            </div>
            <div className="nominateButton">
                <input type="button" value="Next" onClick={onNominate}/>
            </div>
            
            
        </div>

        
    )
}

export default NominatePerson

screenshot

标签： reactjsreact-hooks

Answer 1

<div className='nomineesSelectedList'>
  {selectedOption.map((x, i) => {
    return (
      <div key={i}>
          <p>{x[i].key}</p> 
          <input type='textarea' className='nomineechoosed' />
      </div>
     )))}
</div>