Javascript 将值从窗体传递到另一个组件

我有一个表单组件，有三个输入字段，当表单提交时，这些值应该传递给Results组件。当我提交什么都没有发生时，它们会打印在控制台上，但不会打印在结果组件上

在ResultsJS组件中，我尝试传递道具，但什么也没有发生，没有错误消息。有人能识别我的代码中缺少了什么吗

谢谢大家!

APp.js

import React, { Component } from 'react';
import Form from './components/Form';
import Results from './components/Results';

import './App.css';

class App extends Component {
  state = {
    title: '',
    author: '',
    isbn: ''
  }

  render() {
    //const {title, author, isbn} = this.state;
    return (
      <React.Fragment>
        <div className="container">
          <Form />
          <Results 
            title={this.state.title}
            author={this.state.author}
            isbn={this.state.isbn}
          />
        </div>
      </React.Fragment>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“./components/Form”导入表单；
从“./components/Results”导入结果；
导入“/App.css”；
类应用程序扩展组件{
状态={
标题：“”，
作者：''，
isbn:'
}
render（）{
//const{title，author，isbn}=this.state；
返回(
);
}
}
导出默认应用程序；

Form.js：

import React, { Component } from 'react';


class Form extends Component {
    constructor(props){
        super(props);
        this.state = {
            title: '',
            author: '',
            isbn: '',
        }

        this.onChangeHandler = this.onChangeHandler.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        //const {title, author, isbn} = this.state;
        console.log('Title: ' + this.state.title);
        console.log('Author: ' + this.state.author);
        console.log('ISBN: ' + this.state.isbn);

    }

    onChangeHandler = (e) => {
        //const {title, author, isbn} = e.target;
        this.setState({
            [e.target.name]: e.target.value
        })   

    }

  render() {
    return (
      <div>
        <div className="container mt-4">
            <h1 className="display-4 text-center">
                My<span className="text-primary">Book</span>List
            </h1>
        <form onSubmit={this.handleSubmit}>
            <div className="form-group">
                <label htmlFor="title">Title</label>
                <input 
                    type="text" 
                    className="form-control"
                    name="title" 
                    value={this.state.title}
                    onChange={this.onChangeHandler} />
            </div>
            <div className="form-group">
                <label htmlFor="author">Author</label>
                <input 
                    type="text"  
                    className="form-control"
                    name="author"
                    value={this.state.name}
                    onChange={this.onChangeHandler} />
            </div>
            <div className="form-group">
                <label htmlFor="isbn">ISBN#</label>
                <input 
                    type="text" 
                    className="form-control"
                    name="isbn"
                    value={this.state.name}
                    onChange={this.onChangeHandler} />
            </div>
                <input
                    type="submit"
                    value="Add Book"
                    className="btn btn-primary btn-block"
                />
        </form>

        </div>

      </div>


    )
  }
}


export default Form;

import React，{Component}来自'React'；
类形式扩展组件{
建造师（道具）{
超级（道具）；
此.state={
标题：“”，
作者：''，
isbn:“，
}
this.onChangeHandler=this.onChangeHandler.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
//const{title，author，isbn}=this.state；
console.log（'Title:'+this.state.Title）；
console.log（'Author:'+this.state.Author）；
console.log（'ISBN:'+this.state.ISBN）；
}
onChangeHandler=（e）=>{
//const{title，author，isbn}=e.target；
这是我的国家({
[e.target.name]：e.target.value
})   
}
render（）{
返回(
我的书单
标题
著者
ISBN#
)
}
}
导出默认表单；

Results.js

import React from 'react';

const Results = (props) => {
    console.log(props);
    return ( 
        <div>
            <h3>Results</h3>
            <p>{props.title}</p>
            <p>{props.author}</p>
            <p>{props.isbn}</p>
        </div>

     );
}

export default Results;

从“React”导入React；
常量结果=（道具）=>{
控制台日志（道具）；
报税表（
后果
{props.title}

{props.author}

{props.isbn}

);
}
导出默认结果；

您需要将值从

表单

传递给其父级，以便父级可以设置

结果

属性，以下是您的方法

class App extends Component {
  ....
  onFormSubmit = (author, title, isbn) => {
    this.setState({title, author, isbn});
  }

  render() {
    return (
      ....
      <Form onFormSubmit={this.onFormSubmit}/>
      ....  
    );
  }
}


class Form extends Component {
    ....

    handleSubmit = (e) => {
        e.preventDefault();
        const { author, title, isbn } = this.state;   
        this.props.onFormSubmit(author, title, isbn);
    }
    ....
}

类应用程序扩展组件{
....
onFormSubmit=（作者、标题、isbn）=>{
this.setState（{标题，作者，isbn}）；
}
render（）{
返回(
....
....  
);
}
}
类形式扩展组件{
....
handleSubmit=（e）=>{
e、 预防默认值（）；
const{author，title，isbn}=this.state；
此.props.onFormSubmit（作者、标题、isbn）；
}
....
}