Невозможно распечатать несколько входных данных формы в React - PullRequest
0 голосов
/ 11 марта 2020

Я новичок в React и пытаюсь напечатать значения кнопки «Ввод при отправке». Я объявил пустое состояние и сохранил в нем входное значение. При попытке показать единственные входные данные я не получаю никакой ошибки. Теперь я пытался сохранить его в массиве и отобразить с помощью компонента Results с помощью метода Map.

Ошибка:

TypeError: item.map is not a function

Приложение. js:

import React, { Component } from 'react'
import Result from './Result';
import Navbar from './Navbar';
import Jumbotron from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';


export default class App extends Component {
    constructor(){
    super();
      this.state={
        items:'',
        addedItems:[]
      }
      this.handleChange=this.handleChange.bind(this);
      this.handleSubmit=this.handleSubmit.bind(this);
    }

     handleChange(e){
       this.setState({
         items:e.target.value
       })
     }

     handleSubmit(e){
      this.setState({
        addedItems:this.state.items
      })
     }
  render() {
    return (
     <div>
          <Navbar/>
          <Jumbotron>
          <p>
            Enter the things you would like to buy.
          </p>
        </Jumbotron>

        <Form>
          <Form.Group controlId="formBasicEmail">
            <Form.Control value={this.state.items} onChange={this.handleChange}type="email" placeholder="Enter email" />
          </Form.Group>
          <Button onClick={this.handleSubmit}variant="primary" type="submit">
            Submit
          </Button>

        </Form>
        <Result item={this.state.addedItems} />       
      </div>
    )
  }
}

Результат. js

import React from 'react'
import ListGroup from 'react-bootstrap/ListGroup'

export default function Result(props) {
    const {item}=props;
    //let show=item.map(item=>item);
  let itemShow=item.map(i=>{
      return <li>{i}</li>
  })  

    return (
        <div>
            <ListGroup>
               {itemShow}
            </ListGroup>
        </div>
    )
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...