如何在反应中将多个值添加到动态表中？

Posted 2023-03-23

【中文标题】如何在反应中将多个值添加到动态表中？

【英文标题】：How do I add multiple values to a dynamic table in react?

【发布时间】：2021-11-26 14:13:40

【问题描述】：

我有一个从两个选择中收集用户输入的表。当用户选择一个字段时，我已成功完成，以便他们的输入显示在表格行上，并且任何新输入都会触发一个新行。

但是我很难让它显示多个值而不是一个。这是它目前的样子：

在输入示例“P2P2”的地方应该只说“P2”；每次添加新行时，都会成功添加“P2”，但它总是建立在彼此之上，这与“Amazon”输入不同，如下所示：

我知道我做错了并且尝试了多种方法，但我实际上不知道问题是什么或如何解决问题。代码如下：

 
  const [shop, setShop] = useState([]);
  
  const [profil, setProfil] = useState([]);

  const [formShop, setFormShop] = useState(undefined);
  
  const [formProfil, setFormProfil] = useState(undefined);
  
  function addShop(s)
    setShop((currentShops) => [...currentShops, s]);
  

  
  function addProfile(p)
    setProfil((currentProfiles) => [...currentProfiles, p]);
  

  function handleSubmit(e)
    e.preventDefault();

    addShop(formShop);
    addProfile(formProfil);

  

        ......

                    <tr>
                      (shop.map((s) => (
                        <tr>
                        <td>s</td>
                        <td>profil</td>
                        </tr>
                      )))
                    </tr>
                    
                    ........
                    //snippets of form select

                    <Input type="select" name="selectStore" id="selectStore" onChange=(e) => setFormShop(e.target.value)>

                    ........

                    <Input type="select" name="selectProf" id="selectProf" onChange=(e) => setFormProfil(e.target.value)>

                    ........

【问题讨论】：

能否提供代码sn-p？

@Singh codepen.io/Guy-Fawkes-cc/pen/ZEygORE

【参考方案1】：

我建议你使用一个对象来管理pair shop-profile，这是一个工作示例。

const useState = React;
const 
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Input,
  FormGroup,
  FormText,
  Form,
  Label,
  Button,
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  //CardFooter,
  Table,
  Row,
  ButtonGroup,
  Col,
 = Reactstrap;

const App = (props) => 
  const [shopProfil, setShopProfil] = useState([]);


  const [formShop, setFormShop] = useState(undefined);

  const [formProfil, setFormProfil] = useState(undefined);
console.log(formShop,formProfil)


  function addShopProfil(obj) 
    setShopProfil((currentShopProfiles) => 
      const curr = currentShopProfiles.slice()
      curr.push(obj);
      return curr
    )
  

  function handleSubmit(e) 
    e.preventDefault();
    const objshopProfil =
      formshop:formShop,
      formprofil:formProfil
    ;

    
    addShopProfil(objshopProfil);
    
  

  return (
    <div>
      <div>
        <Table>
          <tbody>
            <tr>
              shopProfil.map((s,index) => (
                <tr key=`$s.formshop+s.formprofil+index`>
                  <td>s.formshop</td>
                  <td>s.formprofil</td>
                </tr>
              ))
            </tr>
          </tbody>
        </Table>
      </div>

      <Form onSubmit=handleSubmit>
        <FormGroup>
          <Label for="selectStore">Store</Label>
          <Input
            type="select"
            name="selectStore"
            id="selectStore"
            onChange=(e) => setFormShop(e.target.value)
          >
            <option>-</option>
            <option>Amazon </option>
            <option>Local</option>
            <option>Target</option>
          </Input>
        </FormGroup>
        <FormGroup>
          <Label for="selectProf">Profile</Label>
          <Input
            type="select"
            name="selectProf"
            id="selectProf"
            onChange=(e) => setFormProfil(e.target.value)
          >
            <option>-</option>
            <option>P1</option>
            <option>P2</option>
            <option>P3</option>
            <option>P4</option>
          </Input>
        </FormGroup>
        <button type="submit">button</button>
      </Form>
    </div>
  );
;

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<script src="https://npmcdn.com/react@15/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/reactstrap@3/dist/reactstrap.min.js"></script>
<link href="https://npmcdn.com/bootstrap@4.0.0-alpha.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>


<div id="app"></div>

或者，如果您想保持相同的结构，请看这里：

const useState = React;
const 
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Input,
  FormGroup,
  FormText,
  Form,
  Label,
  Button,
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  //CardFooter,
  Table,
  Row,
  ButtonGroup,
  Col,
 = Reactstrap;

const App = (props) => 
  const [shop, setShop] = useState([]);

  const [profil, setProfil] = useState([]);

  const [formShop, setFormShop] = useState(undefined);

  const [formProfil, setFormProfil] = useState(undefined);

  function addShop(s) 
    setShop((currentShops) => [...currentShops, s]);
  

  function addProfile(p) 
    setProfil((currentProfiles) => [...currentProfiles, p]);
  

  function handleSubmit(e) 
    e.preventDefault();

    addShop(formShop);
    addProfile(formProfil);
  

  return (
    <div>
      <div>
        <Table>
          <tbody>
            <tr>
              shop.map((s,i) => (
                <tr key=`$s+i`>
                  <td>s</td>
                  <td>profil[i]</td>
                </tr>
              ))
            </tr>
          </tbody>
        </Table>
      </div>

      <Form onSubmit=handleSubmit>
        <FormGroup>
          <Label for="selectStore">Store</Label>
          <Input
            type="select"
            name="selectStore"
            id="selectStore"
            onChange=(e) => setFormShop(e.target.value)
          >
            <option>-</option>
            <option>Amazon </option>
            <option>Local</option>
            <option>Target</option>
          </Input>
        </FormGroup>
        <FormGroup>
          <Label for="selectProf">Profile</Label>
          <Input
            type="select"
            name="selectProf"
            id="selectProf"
            onChange=(e) => setFormProfil(e.target.value)
          >
            <option>-</option>
            <option>P1</option>
            <option>P2</option>
            <option>P3</option>
            <option>P4</option>
          </Input>
        </FormGroup>
        <button type="submit">button</button>
      </Form>
    </div>
  );
;

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<script src="https://npmcdn.com/react@15/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/reactstrap@3/dist/reactstrap.min.js"></script>
<link href="https://npmcdn.com/bootstrap@4.0.0-alpha.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>


<div id="app"></div>