javascript - React 中的值如何从 Child 元素传递到姐妹元素?JSX
问题描述
我正在从下拉日期选择器中获取一个日期,并尝试在另一个页面中使用它,这样我就可以交叉参考时间进行预订。当 Datepicker 选择一个日期,并且在 Btnsearch 上设置了 props 值时,它会尝试重定向并且看起来它确实会重新呈现,但是当 wasSubmit 更改为 true 时,prop 值是未定义的。我从哪里拉这个道具?
我添加了我认为是路由器的东西,我用属性设置了状态,this.state.value
但这似乎不能解决问题。
这是我的日期选择器、Btnsearch、Bookingpage
import "./Btnsearch/Btnsearch";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";
import { Redirect } from 'react-router-dom';
import Bookingpage from "./Bookingpage/Bookingpage";
// reactstrap components
import {
FormGroup,
InputGroupAddon,
InputGroupText,
InputGroup,
Col,
Row
} from "reactstrap";
import Btnsearch from "./Btnsearch/Btnsearch";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
//this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = event => {
event.preventDefault();
this.setState({wasSubmitted: true});
}
render() {
const { value, wasSubmitted } = this.state;
if (wasSubmitted) {
return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></Bookingpage>
} else {
return (
<>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText
>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
value={this.state.value}
onChange={this.handleChange}
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
</InputGroup>
</FormGroup>
<form onSubmit={this.handleSubmit}>
<Btnsearch type="submit" value={this.state.value}/>
</form>
</>
);
}
}
}
export default Datepicker;
import '../Datepicker';
class Btnsearch extends React.Component {
render() {
return (
<button onClick={() => console.log(this.props.value)} className="btn btn-success search-card-btn">Search</button>
);
}
};
export default Btnsearch;
import '../Datepicker';
class Bookingpage extends React.Component {
render() {
return(
<div className="bookingPage">
<h1>{this.props.value}</h1>
</div>
);
}
}
export default Bookingpage;
When Select the date and hit the search btn I expect it to redirect to a page Bookingpage that says the value selected. 实际结果是
<div class="App">
<div class="card freesearch-option">
<label><span class="searchTitleTxt">Search For Availability</span>
<div class="bookingPage">
<h1></h1></div>
</label>
</div>
</div>
State
value:
""
wasSubmitted: true
解决方案
我没有看到 handleChange 函数。
因此,您似乎在选择一个日期,但没有.setState()
选择this.state.value
.
<ReactDatetime
value={this.state.value}
// HERE YOU CALL IT, BUT handleChange DOESN'T EXIST.
onChange={this.handleChange}
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
好吧,一个合适的 handleChange 函数可能是这样的:
.
.
.
handleSubmit = event => {
event.preventDefault();
this.setState({wasSubmitted: true});
}
handleChange = e => {
e.preventDefault();
this.setState({ value: e.target.value });
}
render() {
const { value, wasSubmitted } = this.state;
if (wasSubmitted) {
return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></Bookingpage>
} else {
.
.
.
- 你不必 .bind() 既不需要这个函数,也不
handleSubmit
需要你使用胖箭头语法。
推荐阅读
- angular - 在 ts 代码中添加到元素时,为什么不使用角度材料工具提示?
- sql - amazon-redshift : 选择 id, first(a),sum(b) group by id
- java - 内部最终对象(Java)上可能存在内存泄漏
- hive - Hive 表更新错误尝试使用不支持这些操作的事务管理器进行更新或删除
- python - 如何根据脚本位置下载图像并将其放在新目录中?
- c# - 如何将多个对象从控制器操作传递到 MVC 中的视图?
- jdbc - 无法在安装它的系统之外访问greenplum?
- java - 改变屏幕亮度而不是睡眠
- javascript - 为什么我不能从 Koa 路由器提供静态文件?
- javascript - 您如何更新与线程相关的 Gmail 草稿而不丢失线程的链接?