在 React 中,如果当前组件的输入(文本字段)为空,我想停止渲染下一个组件。我没有表单或输入提交标签,只有 state 和 onChange 方法。
class TextFields extends React.Component {
constructor(props){
super(props);
this.state = {
studentId: null,
studentName: null,
employeeName: null,
supervisorName: null,
};
}
handleChange = () => event => {
this.setState({
[event.target.id]: event.target.value,
});
}
componentWillUnmount() {
this.props.setFormPart1Value(this.state);
}
render() {
const { classes } = this.props;
return (
<form className={classes.container} noValidate autoComplete="off" >
<TextField
required
id="studentId"
label="Student ID"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>
<TextField
required
id="studentName"
label="Student Name"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>
<TextField
required
id="employeeName"
label="Employee Name"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>
<TextField
required
id="supervisorName"
label="Supervisor Name"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>
</form>
);
}
}
因此,如果有任何组件方法可以停止渲染或任何其他想法而不添加表单或输入提交。 我是 React 新手,所以任何人都可以帮助我..
最佳答案
class TextFields extends React.Component {
constructor(props){
super(props);
this.state = {
studentId: null,
studentName: null,
employeeName: null,
supervisorName: null,
};
}
handleChange = () => event => {
this.setState({
[event.target.id]: event.target.value,
});
}
componentWillUnmount() {
this.props.setFormPart1Value(this.state);
}
render() {
const { classes } = this.props;
const { studentId, studentName, employeeName} = this.state;
return (
<form className={classes.container} noValidate autoComplete="off" >
<TextField
required
id="studentId"
label="Student ID"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>
{studentId && <TextField
required
id="studentName"
label="Student Name"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>}
{studentName && <TextField
required
id="employeeName"
label="Employee Name"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>}
{employeeName && <TextField
required
id="supervisorName"
label="Supervisor Name"
className={classes.textField}
onChange={this.handleChange()}
margin="normal"
/>}
</form>
);
}
}
你可以做类似的事情, 仅当前一个字段具有值时,女巫才会渲染
关于javascript - 如何停止加载 React 中的下一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52292038/