[英]How can I pass through some props to other components in reactjs?
这应该接收一些用户信息,我想将用户输入更新的一些状态传递到另一个组件中的表中,但是,我在网上看到的方式似乎不起作用,它们是只是在表格中显示空白而不是输入值。
class StartPage extends Component {
constructor(props) {
super(props);
this.state = {
setBots: '',
setEmployees: '',
setSalary: '',
setTime: '',
};
this.handleChange = this.handleChange.bind(this);
this.onCalculateSubmit =
this.onCalculateSubmit.bind(this);
};
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
};
onCalculateSubmit(event) {
alert(this.state.setSalary);
this.setState({calcClicked: true});
}
render(){
return (
<div className="container">
<div className="header-container">
<h2> </h2>
<h1>Return on Investment Calculator</h1>
<h2> </h2>
</div>
<form onSubmit={this.onCalculateSubmit}>
<div class="inputs input-group">
{/* <InputCard onChange={this.handleBots} value=
{this.state.value} id="Bots" icon="robot"
label="Number of Processes" />
<InputCard onChange={this.handleEmployees} value=
{this.state.setEmployees} type="text" id="Employees"
icon="users"
label="Number of FTE's" />
<InputCard onChange={this.handleSalary} id="Salary"
icon="dollar-sign" label="Average Salary" />
<InputCard onChange={this.handleTime} id="Time"
icon="clock" label="Average Time (%)" /> */}
<label>
Number of Processes:
<input type="text" onChange={this.handleChange}
name="setBots" /> {/*value={this.state.value}*/}
</label>
</div>
<div class="inputs input-group">
<label>
Number of FTEs:
<input type="text" onChange={this.handleChange}
name="setEmployees" />
</label>
</div>
<div class="inputs input-group">
<label>
Average Salary for FTEs:
<input type="text" onChange={this.handleChange}
name="setSalary" />
</label>
</div>
<div class="inputs input-group">
<label>
Percent of Time Spent on Task:
<input type="text" onChange={this.handleChange}
name="setTime" />
</label>
</div>
<Router>
<div>
<h1> </h1>
<Link to='/ResultsPage' >
<button type="submit" onClick=
{this.onCalculateSubmit}
class="btn btn-outline-success submit-button btn-
lg">CALCULATE</button>
</Link>
</div>
<Switch>
<Route path="/ResultsPage" exact>
<ResultsPage data={this.state.setSalary} />
</Route>
</Switch>
</Router>
{/*<input type="submit" value="Submit"/>*/}
</form>
这是另一个组件,应该使用表中的道具。 截至目前,它输出空白:
const ResultsPage = (data) => {
return (
<>
<Header />
<Table table-hover className="resultsTable">
<thead>
<tr>
<th> </th>
<th>Year 1</th>
<th>Year 2</th>
<th>Year 3</th>
<th>Year 4</th>
<th>Year 5</th>
</tr>
</thead>
<tbody>
<tr>
<b><td>Salary of Employee(s) Spent on Task</td></b>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
</tr>
我看到可能有 2 个问题。
第一个是你的表格。 我认为您也需要重新格式化您的父组件。 我不建议在整个路由器周围使用表单,因为这意味着您拥有的每条路由都将成为可能导致问题的表单的一部分。 但是这个问题是您没有阻止表单的默认操作,即 GET 请求。
onCalculateSubmit(event) {
event.preventDefault();
alert(this.state.setSalary);
this.setState({calcClicked: true});
}
但主要的一个是在你的 ResultsPage 组件中。 当你将 props 传递给一个组件时,它们都被一起保存为一个对象。 因此,您要么需要将其解构为数据变量const { data } = props
要么只需从对象props.data.setSalary
调用 if
const ResultsPage = (props) => {
const { data } = props;
// or you could say props.data.setSalary
return (
<>
<Header />
<Table table-hover className="resultsTable">
<thead>
<tr>
<th> </th>
<th>Year 1</th>
<th>Year 2</th>
<th>Year 3</th>
<th>Year 4</th>
<th>Year 5</th>
</tr>
</thead>
<tbody>
<tr>
<b><td>Salary of Employee(s) Spent on Task</td></b>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
<td>{data.setSalary}</td>
</tr>
</tbody>
</Table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.