Question

我是 Reactjs 的新手，我想隐藏物化 progressBar，但是会引发错误。因此，我想知道所使用的方法是否正确。还有另一种隐藏此组件的方法。下面是错误的快照：

如果我尝试使用getElementById，则会在下面显示此错误，因此应该使用：

这是代码正在使用：

  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>

        );
    }

Answer 1

React方法是将状态设置为可见，并且仅在状态为true时才渲染条形图。组件安装后将状态设置为false。

使用React时，应避免在渲染后操作DOM元素。

null

在Reactjs中隐藏Materialize ProgressBar-Reactjs

1 个答案: