Скрыть материализацию ProgressBar в Reactjs - Reactjs - PullRequest
Новая
       10

Скрыть материализацию ProgressBar в Reactjs - Reactjs

0 голосов
/ 09 октября 2018

Я новичок в Reactjs и хочу скрыть materialize progressBar, но есть ошибка, которая выдается.Поэтому мне интересно, если используемый подход не является правильным.Есть ли другой способ скрыть этот компонент.Ниже приведен снимок ошибки:

Сообщение об ошибке

Если я пытаюсь использовать getElementById, я получаю эту ошибку ниже, так что я должен использовать:

сообщение об ошибке 2

Этот код я использую: 

  componentDidMount() {

        console.log('Parent did mount.');
        document.getElementById('text_message').style.visibility = "hidden";
        document.getElementsByName('progress_Bar').style.display ="none";


    }

    render() {
        return (
            <div>
                <Card className="card-effects right">

                    <ProgressBar  id="progress_Bar" name="progress_Bar"/>

                    <form className="card-form-signup" onSubmit={this.handleSubmit}>
                        <Row>
                            <label className="signup-header"><b>Signup to Authors Haven</b></label>
                        </Row>
                        <Row>
                            <Input s={12} placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} validate>
                                <Icon className="icon-styles">account_box</Icon></Input>
                        </Row>
                        <Row>
                            <Input s={12} type='email' name="email" value={this.state.email}  onChange={this.handleChange} placeholder="Email"    validate><Icon className="green darken-4">email</Icon></Input>
                        </Row>
                        <Row>
                            <Input s={12} type='password'  name="password" placeholder="Password"  value={this.state.password} onChange={this.handleChange}  validate>
                                <Icon className="icon-styles">vpn_key</Icon></Input>
                        </Row>
                        <Row>
                            <Input s={12} type='password' name="confirm_password" placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
                                <Icon className="icon-styles">vpn_key</Icon></Input>
                        </Row>
                        <Row>
                            <label >Already have an account ? </label>
                        </Row>

                        <Row>
                            <Button className='button-effects' type="submit" value="Submit" > Sign up </Button>
                        </Row>

                        <Row>
                            <label className="text-message" id="text_message" name="text_message"><i>text message</i></label>
                        </Row>
                    </form>
                </Card>
            </div>

        );
    }

1 Ответ

0 голосов
/ 09 октября 2018

Подход React заключается в том, чтобы установить видимое состояние и визуализировать полосу только тогда, когда состояние истинно.установите состояние на false, когда компонент монтировал.

Следует избегать манипулирования элементами DOM после рендеринга при использовании React. 

constructor(props) {
    super(props);
    this.state = {
        visible: true
    }
}

componentDidMount() {
    console.log('Parent did mount.');
    document.getElementById('text_message').style.visibility = "hidden";
    this.setState({visible: false});
}

render() {
    const isVisible = this.state.visible;

    return (
        <div>
            <Card className="card-effects right">

                {isVisible && <ProgressBar  id="progress_Bar" name="progress_Bar"/>}

                <form className="card-form-signup" onSubmit={this.handleSubmit}>
                    <Row>
                        <label className="signup-header"><b>Signup to Authors Haven</b></label>
                    </Row>
                    <Row>
                        <Input s={12} placeholder="Username" name="username" value={this.state.username} onChange={this.handleChange} validate>
                            <Icon className="icon-styles">account_box</Icon></Input>
                    </Row>
                    <Row>
                        <Input s={12} type='email' name="email" value={this.state.email}  onChange={this.handleChange} placeholder="Email"    validate><Icon className="green darken-4">email</Icon></Input>
                    </Row>
                    <Row>
                        <Input s={12} type='password'  name="password" placeholder="Password"  value={this.state.password} onChange={this.handleChange}  validate>
                            <Icon className="icon-styles">vpn_key</Icon></Input>
                    </Row>
                    <Row>
                        <Input s={12} type='password' name="confirm_password" placeholder="Confirm password" value={this.state.confirm_password} onChange={this.handleChange} validate>
                            <Icon className="icon-styles">vpn_key</Icon></Input>
                    </Row>
                    <Row>
                        <label >Already have an account ? </label>
                    </Row>

                    <Row>
                        <Button className='button-effects' type="submit" value="Submit" > Sign up </Button>
                    </Row>

                    <Row>
                        <label className="text-message" id="text_message" name="text_message"><i>text message</i></label>
                    </Row>
                </form>
            </Card>
        </div>

    );
}
...