javascript - 将值从表单传递到另一个组件
问题描述
我有一个带有三个输入字段的表单组件,当提交表单时,这些值应该传递给结果组件。当我提交没有任何反应时,它们会在控制台上打印,但不会在结果组件上打印。
在结果 js 组件中,我尝试传递道具,但没有任何反应,没有错误消息。有人可以识别我的代码中缺少什么吗?
谢谢!
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;
表单.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;
解决方案
您需要将值从 传递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);
}
....
}
推荐阅读
- java - 用 SpannableString 中的字符串替换字符串
- typescript - TypeScript 返回精确的函数推断类型
- localhost - 无法使用我的 IP 地址访问 Artifactory
- svg - 如何弯曲 SVG 图像
- java - 通过休息服务检查数据库表的每条记录
- node.js - Typescript NodeJs 解决方案拆分为多个项目
- java - 原因:java.lang.IllegalStateException:计时器已取消。:Oracle 数据库
- javascript - Mozilla Firefox 和 Material-UI 之间出现这种视觉问题的根本原因是什么?
- java - 如何在任何 Java Spring MVC 代码中调用水平菜单?Java Spring MVC 中是否有 php 的 include_once 类似物?
- javascript - TypeError: require(...).collection 不是 Object 的函数。