使用来自不同组件的值设置状态

Question

I have an array of book objects in my App.js class

{ id: 1,title: "How to Learn JavaScript - Vol 1", info: "Study hard"},
    { id: 2,title: "How to Learn ES6", info: "Complete all exercises :-)"},
    { id: 3,title: "How to Learn React",info: "Complete all your CA's"},
    { id: 4,title: "Learn React", info: "Don't drink beers, until Friday (after four)"
    }

I want to make a new component where I can add new book objects.

import React, { Component } from 'react'

export default class AddBook extends Component {

    state={
        title: '',
        info: ''
    }
  render() {
    return (
      <div>
        <input type="text" placeholder="title" value={this.state.title} onChange={(e) =>{this.setState({title: e.target.value})}}>Enter title</input>
        <input type="text" placeholder="title" value={this.state.info} onChange={(e) =>{this.setState({info: e.target.value})}}>Enter Info</input>
        <button onClick={this.props.addBook(this.state.title, this.state.info)}>Submit</button>
      </div>
    )
  }
}

I want to pass the values from the forms back to App.js, so I can add an object to my array of books.

Answer 1

Here is your App.js:

import React from 'react';
import Form from './Form';

export default class App extends React.Component {
  state = { books: [] };

  addBook = book => {
    this.setState({ books: [book, ...this.state.books] });
  };
  render() {
    return (
      <div>
        <Form addBook={this.addBook} />
        {this.state.books.map(book => {
          return (
            <div key={book.id}>
              <div>Title: {book.title}</div>
              <div>Info: {book.info}</div>
            </div>
          );
        })}
      </div>
    );
  }
}

And here is your Form.js:

import React from 'react';

export default class Form extends React.Component {
  state = { title: '', info: '' };

  generateId = () =>
    Math.random()
      .toString(36)
      .substr(2, 10);

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  handleSubmit = event => {
    event.preventDefault();
    this.props.addBook({
      id: this.generateId(),
      title: this.state.title,
      info: this.state.info,
    });
    this.setState({ title: '', info: '' });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="title"
          value={this.state.title}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="info"
          value={this.state.info}
          onChange={this.handleChange}
        />
        <input type="submit" />
      </form>
    );
  }
}

Try and dissect it and figure out how it works... If you have questions ask...