javascript - 将值从表单传递到另一个组件

Question

我有一个带有三个输入字段的表单组件，提交表单时，这些值应传递给结果组件。当我提交时没有任何反应，它们会打印在控制台上，但不会打印在结果组件上。

在 Results js 组件中，我尝试传递 props 但没有任何反应，也没有错误消息。有人可以确定我的代码中缺少什么吗？

谢谢!

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;

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;

结果.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;

Answer 1

您需要将值从 Form 传递到其父级，以便父级可以设置 Result 属性，以下是执行此操作的方法。

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);
    }
    ....
}