在类组件中动态设置render()

时间:2019-06-14 19:20:37

标签: javascript reactjs components react-component

在使用axio完成发布之后,我想渲染另一种形式来代替当前渲染。

这个想法是登录后返回带有复选框的分支列表(我还没有做,我在解释逻辑本身)

我不知道是否可能。我想在不使用路线的情况下利用Login组件中的SelecionarFiliais组件

我正在导入,但未在代码中显示

class Login extends React.Component {
constructor(props) {
    super(props);
    document.title = 'Adapta Web - Login'
    this.handleClick = this.handleClick.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.SelecionarFiliais = this.SelecionarFiliais.bind(this);
    this.state = {
        email: '',
        password: '',
    }
}

SelecionarFiliais (id_login){
    return (
        <SelecionarFiliais id_login={id_login}></SelecionarFiliais>
    )
}

handleClick(event) {
    let params = {
        usuario: this.state.email,
        senha: this.state.password,
    };
    axios.post('http://localhost/api_adapta_web/public/api/autenticar', params)
    .then(function(response){
        this.props.history.push('/selecionar_filiais')
    })
    .catch(function(error){
        if (error.response){
            alert(error.response.data.message);
        } else if (error.request){
            alert(error.message);
            alert('teste');
        } else{
            alert(error.message);
        }
    });
} 

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
}

render () {
    return (
        <Container maxWidth="xs">
        <CssBaseline />
            <Paper className={this.props.classes.paper}>
                <form className={this.props.classes.form} noValidate>
                    <img src={logo} className={this.props.classes.img} alt="Adapta Web Logo"></img>
                    <Typography component="h1" variant="h5"> Adapta Web - Login </Typography>
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        id="email"
                        label="Email"
                        name="email"
                        autoComplete="email"
                        autoFocus
                        onChange={this.handleInputChange}
                    />
                    <TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        name="password"
                        label="Senha"
                        type="password"
                        id="password"
                        autoComplete="current-password"
                        onChange={this.handleInputChange}
                    />
                    <FormControlLabel
                        control={<Checkbox value="remember"/>}
                        label="Lembrar credenciais"
                    />
                    <Button
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={this.props.classes.botao}
                        onClick={this.handleClick}
                    >
                    Entrar
                    </Button>
                    <Button
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={this.props.classes.botao}
                        onClick={this.SelecionarFiliais}
                    >
                    Esqueci a senha
                    </Button>
                </form>
            </Paper>
        </Container>
    );
}

0 个答案:

没有答案