Блог

Главная - Вопросы по программированию - Как добавить несколько значений в динамическую таблицу в react?

Как добавить несколько значений в динамическую таблицу в react?

#javascript #reactjs #reactstrap

Вопрос:

У меня есть таблица, которая собирает данные пользователя из двух вариантов. Когда пользователь выбирает поле, я успешно сделал так, чтобы его ввод отображался в строке таблицы, и любой новый ввод запускает новую строку.

Однако мне очень трудно сделать так, чтобы он отображал несколько значений вместо одного. Вот как это выглядит в настоящее время:

введите описание изображения здесь

Где говорится, что пример ввода «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)}>

                    ........

Комментарии:

1. Можете ли вы предоставить фрагмент кода?

2. @Сингх codepen.io/Guy-Fawkes-cc/pen/ZEygORE

Ответ №1:

Я предлагаю вам использовать объект для создания профиля магазина пары , вот рабочий пример.

 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>
Метки: