React 中Child 元素的值怎么传到姊妹元素 |建兴兴业
How can the value go from the Child element to the sister Element in React | 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;
当 Select 日期并点击搜索按钮时,我希望它重定向到一个页面 Bookingpage,其中显示所选值。实际结果是
<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
。
我正在从下拉日期选择器中获取一个日期,并尝试在另一个页面中使用它,这样我就可以交叉参考开放预订的时间。当 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;
当 Select 日期并点击搜索按钮时,我希望它重定向到一个页面 Bookingpage,其中显示所选值。实际结果是
<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
。