如何解决ReactJS-在表单上单击另一个选择后,如何重新呈现组件?
React在这里相对较新,如果可以轻松解决,请原谅我。
我有一个具有表单的组件-该表单有4个选择,我的意图是每次您单击表单上的一个选项时,都会使用所选选择中的数据来呈现子组件。
这是我遇到的问题。目前,我可以在选择第一个选项时加载子组件,但是除非先选择默认值,否则无法重新加载该组件。
附上我的代码:App.js;这是codeandbox:https://codesandbox.io/s/blissful-agnesi-1wo7s
import React,{ Component } from 'react';
import ChildComponent from './ChildComponent';
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: '',prevValue: '',submitted: false
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({prevValue: this.state.value});
this.setState({value: event.target.value});
this.setState({submitted: true});
event.preventDefault();
}
render() {
var renderingBool = false;
if (this.state.submitted) {
if (this.state.value !== "--") {
renderingBool = true;
}
}
return (
<div className="Base">
<h1> By Productline </h1>
<form>
<label className="label">
Select Workflow: {" "}
<select value={this.state.value} onChange={this.handleChange}>
<option value="--"> -- </option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
</label>
</form>
<div>
{renderingBool && <ChildComponent history={this.props.history} detail={this.state.value}/>}
</div>
</div>
);
}
}
export default App;
ChildComponent.js
import React,{Component} from 'react';
class ChildComponent extends Component{
constructor(props) {
super(props);
this.input = props.detail;
}
render() {
return(
<h1>{this.input}</h1>
);
}
}
export default ChildComponent;
我目前已经设置好了,因为如果在调用子组件之前没有布尔值,我将无法渲染它。因此,有意义的是,我必须将renderingBool
设置为false(通过选择“-”),然后通过选择另一种选择再次将其设置为true,所有这些都是为了重新呈现childComponent。>
是否有解决方法?是否可以在不选择默认值的情况下重新渲染子组件?
解决方法
您需要了解问题出在ChildComponent,而不是您的App组件。
render() {
return(
<h1>{this.input}</h1>
);
}
如您所见,您始终渲染this.input
。应该分配给props.detail
,但是请注意,分配仅发生在构造函数中,这意味着它不够动态。
因此,将您在ChildComponent上的渲染方法更改为此。
...
<h1>{this.props.detail}</h1>
...
,
问题
子组件对更新后的道具没有反应。将选择值切换回“-”后,您只会看到更新后的值 。
{renderingBool && ( // <-- when false,unmounts child
<ChildComponent
history={this.props.history}
detail={this.state.value}
/>
)}
class ChildComponent extends Component{
constructor(props) {
super(props);
this.input = props.detail; // <-- only gets prop value when mounting
}
render() {
return(
<h1>{this.input}</h1>
);
}
}
解决方案
只需在孩子中渲染道具
class ChildComponent extends Component{
render() {
return(
<h1>{this.props.detail}</h1>
);
}
}
建议
将初始值设置为"--"
并在用户界面中禁用该选项,以使其不可选择
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: "--",// <-- set initial select value
prevValue: "",submitted: false
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
event.preventDefault();
const { value } = event.target;
this.setState({
prevValue: this.state.value,submitted: true,value
});
}
render() {
return (
<div className="Base">
<h1> By Productline </h1>
<form>
<label className="label">
Select Workflow: {" "}
<select value={this.state.value} onChange={this.handleChange}>
<option disabled value="--"> -- </option> // <-- disable so it can't be chosen
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
</label>
</form>
<div>
{this.state.value !== "--" && (
<ChildComponent
history={this.props.history}
detail={this.state.value}
/>
)}
</div>
</div>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。