我是新来的 react 。我正在尝试使用react js构建一个 Electron 应用程序。
我想将父组件state
值发送给子组件作为 Prop 。
父组件是Home
,子组件是Help
。
Home.jsx
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
step: 1,
name: "",
address: "",
amount: "",
}
}
handleChange = (e) => {
let nam = e.target.name;
let val = e.target.value;
this.setState({ [nam]: val });
}
render() {
const {date} = this.state;
const values = {date}
return(
<Fragment>
<label id="form-name">Name: </label>
<input
type="text"
name="name"
id="input-name"
onChange={this.handleChange}
/>
{other values}
<Link to="/help" className="btn">next </Link>
</div>
</Fragment>
);
return(
<Help
{...this.state}
/>
)
}
}
Help.jsx
import React, {Component, Fragment} from 'react';
import { Link } from 'react-router-dom';
export class Help extends Component {
continue = () => {
window.print();
}
render() {
return(
<Fragment>
<p id="date">Date : {this.props.date}</p>
<p id="name">RECIEVED With thanks from {this.props.name}</p>
<Link to="/"><button id="btn-print" onClick={this.continue} value="Print"> Print</button></Link>
<button id="btn-back" onClick={this.goBack}>
Back
</button>
</Fragment>
)
}
}
export default Help;
谢谢您的帮助
最佳答案
不要使用基于类的组件,而是可以使用这样的功能组件
const help = (props) => {
continue = () => {
window.print();
}
render() {
return(
<p id="date">Date : {props.date}</p>
<p id="name">RECIEVED With thanks from {props.name}</p>
<Link to="/"><button id="btn-print" onClick={this.continue} value="Print"> Print</button></Link>
<button id="btn-back" onClick={this.goBack}>
Back
</button>
</Fragment>
)
}
}
关于reactjs - 无法将状态数据作为 Prop 发送到另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59839644/