我正在创建一个React组件来管理用户输入。 此Component,UserInput.js具有以下方法,
renderOrigin - 显示Form组件
renderCities - 显示具有不同道具的相同表单组件
renderAddCitiesQuestion - 呈现由...处理的两个按钮(是或否),
handleContinue - 设置状态,回答“继续”问题
getChildSate - 设置子组件(如表单)
接收的状态render - 基于状态的条件渲染。 State有布尔属性,'start'(对于第一个渲染),'rendercities'和'renderQuestion'。
条件的流程如下。 首先,state.start为true,我们调用renderOrigin; 而且,state.start变为false,state.renderCities变为true,我们调用renderCities();而且,state.rendercities变为false,state.renderQuestion变为true,这使我们调用renderAddCityQuestion();现在有两个可能性,要么用户单击否按钮,我们应该什么都不渲染,或者他单击是并且state.renderCities变为true(并且state.renderQuestion变为false),它调用renderCities()(并且它被调用,我通过console.log查看它,但该组件未呈现,而问题组件仍然可见。
我看不出错误。 这是整个代码。
import React from 'react';
import Form_city from './Form_city';
class UserInput extends React.Component {
constructor(props) {
super(props);
this.getChildState = this.getChildState.bind(this);
this.handleContinue = this.handleContinue.bind(this);
this.renderOrigin = this.renderOrigin.bind(this);
this.renderCities = this.renderCities.bind(this);
this.renderAddCitiesQuestion = this.renderAddCitiesQuestion.bind(this);
this.state = {
origin: null,
cities: [],
renderCities: false,
renderQuestion: false,
start: true
}
}
getChildState(stateName, stateVal) {
console.log('setting state. received stateName, stateVal', stateName, stateVal);
this.setState({
[stateName] : stateVal
});
console.log('set state done: ', this.state);
}
handleContinue(answer) {
this.state.renderQuestion = false;
answer === 'yes' ? this.state.renderCities = true : this.state.renderCities = false;
console.log('state after clicking answer: ', this.state);
this.render();
}
renderOrigin() {
return(
<div>
<Form_city
divName="originForm"
text="Please select an Origin:"
type="origin"
placeHolder="Origin"
getChildState={this.getChildState}
/>
</div>
);
}
renderCities() {
console.log('rendering city form');
return(
<div>
<Form_city
divName="citiesForm"
text="Which city do you want to visit?"
type="cities"
placeholder="Destination"
getChildState={this.getChildState}
/>
</div>
);
}
renderAddCitiesQuestion() {
console.log('rendering question');
return(
<div>
<p>Do you want to visit any other city?</p> <br />
<button type="button" onClick={this.handleContinue.bind(this, 'yes')}>Yes</button>
<button type="button" onClick={this.handleContinue.bind(this, 'no')}>No</button>
</div>
);
}
render() {
console.log('inside render\n, state: ', this.state);
let content = null;
if (this.state.start === true) {
console.log('inside render origin conditional');
content = this.renderOrigin();
} else if (this.state.renderCities === true) {
console.log('inside render cities conditional');
content = this.renderCities();
} else if (this.state.renderQuestion === true) {
console.log('inside render question conditional');
content = this.renderAddCitiesQuestion();
} else {
content = <p>Weird stuff?</p>
}
return(
<div> {content} </div>
);
}
}
export default UserInput;
这里也是Form组件的完整性。
import React from 'react';
class Form_city extends React.Component {
constructor(props) {
super(props);
this.state = {data: ''};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState( {data: event.target.value} );
}
handleSubmit(event) {
console.log('clicked submit button');
event.preventDefault();
if (this.props.type === 'origin') {
console.log('inside handle submit Origin, passing: ', this.state.data);
this.props.getChildState('start', false);
this.props.getChildState('origin', this.state.data);
this.props.getChildState('renderCities', true);
} else if (this.props.type === 'cities') {
console.log('inside handle submit Cities');
this.props.getChildState('cities', this.state.data);
this.props.getChildState('renderCities', false);
this.props.getChildState('renderQuestion', true);
}
}
render() {
return(
<div className = {this.props.divName}>
<form onSubmit = {this.handleSubmit}>
<label>
{this.props.text} <br />
<input
type="text"
placeholder={this.props.placeholder}
value={this.state.data}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default Form_city;
答案 0 :(得分:2)
更新状态的方法不正确,如果要使用新状态重新呈现组件,则需要使用setState
:
handleContinue(answer) {
if (answer === 'yes'){
this.setState({
renderQuestion: false,
renderCities: true,
renderCities: false
})
}
}